/* =============================================================================
   DEX Portal - Application Shell

   The frame that never changes: the black top header, the white navigation rail,
   the sliding sub-navigation panel and the content region they surround.
   ============================================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-interface);
    background: var(--surface-canvas);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

svg {
    display: block;
    flex: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #d3d8dc;
    border-radius: var(--radius-button);
}

::-webkit-scrollbar-thumb:hover {
    background: #bfc5cb;
}

::-webkit-scrollbar-track {
    background: transparent;
}


/* =============================================================================
   SHELL LAYOUT
   ============================================================================= */

/* A class that sets `display` overrides the browser's own [hidden] rule, so
   this has to say so itself or the attribute does nothing. */
.application-shell[hidden] { display: none; }

.application-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.application-body {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}


/* =============================================================================
   TOP HEADER
   ============================================================================= */

.top-header {
    height: var(--height-top-header);
    flex: none;
    background: var(--surface-header);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 20px 0 0;
    position: relative;
    /* Above the slide-over panel and its scrim, so the header stays usable
       while a record is open - and so the search results, which are drawn
       inside the header's stacking context, land on top of the panel rather
       than behind it. */
    z-index: 110;
}

.top-header__brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 22px;
    margin-right: 10px;
    flex: none;
}

.top-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
}

.top-header__spacer {
    flex: 1;
}

.top-header__utilities {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-icon-button {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-button);
    display: grid;
    place-items: center;
    color: var(--text-on-dark);
    position: relative;
    transition:
        background var(--duration-instant) var(--easing-standard),
        transform  var(--duration-instant) var(--easing-standard);
}

.header-icon-button:hover {
    background: var(--surface-header-hover);
}

.header-icon-button:active {
    transform: scale(0.94);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -3px;
    min-width: 17px;
    height: 16px;
    padding: 0 4px;
    background: #2f6bff;
    color: var(--text-on-dark);
    font-size: 9.5px;
    font-weight: 700;
    border-radius: 8px;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface-header);
    box-sizing: content-box;
}

.notification-badge--dot {
    min-width: 7px;
    height: 7px;
    padding: 0;
    background: var(--status-danger);
    top: 1px;
    right: 2px;
}

.header-date-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px 0 6px;
    margin-right: 6px;
    border-right: 1px solid #232329;
    height: 30px;
}

.header-date-chip__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.header-date-chip__weekday {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-on-dark-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.header-date-chip__date {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-on-dark);
    margin-top: 2px;
    letter-spacing: -0.02em;
}

.header-date-chip__labels {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.header-date-chip__title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-on-dark);
    cursor: pointer;
}

.header-date-chip__title:hover {
    color: var(--brand-gradient-end);
}

.header-date-chip__action {
    font-size: 11.5px;
    color: var(--text-on-dark-muted);
    cursor: pointer;
}

.header-date-chip__action:hover {
    color: var(--brand-gradient-end);
}

.header-user-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-medium);
    margin-left: 8px;
    background: var(--brand-gradient);
    display: grid;
    place-items: center;
    color: var(--text-on-dark);
    font-weight: 700;
    font-size: 12.5px;
    box-shadow: 0 0 0 2px #2a2a30;
    cursor: pointer;
    transition: box-shadow var(--duration-quick) var(--easing-standard);
}

.header-user-avatar:hover {
    box-shadow: 0 0 0 2px var(--brand-gradient-middle);
}


/* =============================================================================
   BRAND MARK

   "DE", the gradient X, then PORTAL sliding out from behind the X once on load.
   The black wedge inside the X is what gives it the cut-out look, and it relies
   on the header behind it being pure black.
   ============================================================================= */

.brand-mark {
    display: flex;
    align-items: center;
    font-family: var(--font-logo);
    font-size: 19px;
    line-height: 1;
    color: var(--text-on-dark);
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
}

/* The rule above sets `display: flex`, which on its own would beat plain
   `[hidden]`. The header mark is hidden whenever there is no logo and no
   wordmark to show, so it needs to actually go. */
.brand-mark[hidden] {
    display: none;
}

/* It has always looked clickable - `cursor: pointer` was here before anything
   listened. Now that it does something, it also has to be reachable by keyboard
   and show where the focus is. */
.brand-mark--clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 3px;
}

.brand-mark__letters {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.brand-mark__cross {
    width: 0.88em;
    height: 0.72em;
    margin-left: 0.05em;
    flex: none;
}

/* PORTAL is drawn open and still. It used to slide out from behind the X on
   every page load, and a logo that re-animates each time you move around the
   app reads as the app reloading rather than as branding - so it now simply
   sits there, revealed, with no entrance. The `--revealed` class the shell
   still adds is harmless: these are already its end state. */
.brand-mark__suffix {
    display: inline-block;
    overflow: hidden;
    max-width: 7em;
    vertical-align: bottom;
}

.brand-mark__suffix-text {
    display: inline-block;
    font-weight: 300;
    font-size: 0.86em;
    letter-spacing: 0.22em;
    color: #e6e8ea;
    padding-left: 0.42em;
    transform: none;
    opacity: 1;
}

/* The wordmark, 19 Oct 2026: the agency's name in clean type with an
   optional small tag beside it (matches the Branding preview). The old
   letters-and-cross mark is gone. */
.brand-mark--text { gap: 0.45em; align-items: center; }
.brand-mark--text .brand-mark__letters {
    font-family: inherit; font-weight: 800; letter-spacing: -0.01em;
    max-width: 16em; overflow: hidden; text-overflow: ellipsis;
}
.brand-mark--text .brand-mark__suffix { max-width: none; vertical-align: middle; }
.brand-mark--text .brand-mark__suffix-text {
    padding: 0.18em 0.42em; border: 1px solid currentColor; border-radius: 3px;
    font-size: 0.5em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: inherit; opacity: 0.75;
}

/* Themes (Settings > General > Branding). A light header needs a line under it. */
[data-am-header="light"] .top-header { box-shadow: inset 0 -1px 0 #e5e5e5; }
[data-am-header="light"] .header-clock { color: #3b4256; background: #f3f3f3; border-color: #e2e2e2; }
.brand-mark__suffix[hidden],
.brand-mark__letters:empty { display: none; }


/* =============================================================================
   GLOBAL SEARCH - expands inline within the header
   ============================================================================= */

.global-search {
    position: relative;
}

.global-search__field {
    display: flex;
    align-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-medium);
    background: transparent;
    border: 1px solid transparent;
    overflow: hidden;
    transition:
        width        var(--duration-sub-navigation) var(--easing-standard),
        background   var(--duration-quick)          var(--easing-standard),
        border-color var(--duration-quick)          var(--easing-standard);
}

.global-search__field--expanded {
    width: 360px;
    background: var(--surface-header-input);
    border-color: var(--surface-header-border);
}

.global-search__field--expanded .header-icon-button {
    color: var(--text-on-dark-muted);
}

.global-search__field--expanded .header-icon-button:hover {
    background: transparent;
    color: var(--text-on-dark);
    cursor: default;
}

.global-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--text-on-dark);
    padding: 0 4px 0 2px;
    opacity: 0;
    transition: opacity var(--duration-quick) var(--easing-standard) 100ms;
}

.global-search__input::placeholder {
    color: var(--text-on-dark-muted);
}

.global-search__field--expanded .global-search__input {
    opacity: 1;
}

.global-search__hint {
    font: inherit;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-on-dark-muted);
    letter-spacing: 0.04em;
    background: var(--surface-header-hover);
    border: 1px solid var(--surface-header-border);
    border-radius: 5px;
    padding: 3px 6px;
    margin-right: 9px;
    opacity: 0;
    flex: none;
    transition: opacity var(--duration-quick) var(--easing-standard) 100ms;
}

.global-search__field--expanded .global-search__hint {
    opacity: 1;
}

.global-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 360px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--surface-panel);
    border-radius: var(--radius-button);
    padding: 6px;
    box-shadow: var(--shadow-dropdown);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    z-index: 70;
    transition:
        opacity   var(--duration-quick) var(--easing-standard),
        transform var(--duration-quick) var(--easing-standard);
}

.global-search__results--visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.global-search__result {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: var(--radius-small);
    font-size: 13px;
    color: var(--text-secondary);
    text-align: left;
}

.global-search__result:hover,
.global-search__result--highlighted {
    background: var(--accent-tint);
    color: var(--accent);
}

.global-search__result-path {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 450;
    white-space: nowrap;
}

.global-search__result:hover .global-search__result-path,
.global-search__result--highlighted .global-search__result-path {
    color: var(--accent);
    opacity: 0.7;
}

.global-search__empty {
    padding: 26px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}


/* =============================================================================
   NAVIGATION RAIL
   ============================================================================= */

.navigation-rail {
    width: var(--width-navigation-rail);
    min-width: var(--width-navigation-rail);
    flex: none;
    background: var(--surface-navigation-rail);
    display: flex;
    flex-direction: column;
    padding: 10px 0 12px;
    border-right: 1px solid var(--border-default);
    z-index: 50;
}

.navigation-rail__primary {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.navigation-rail__primary::-webkit-scrollbar {
    width: 0;
}

.navigation-rail__secondary {
    padding: 10px 10px 0;
    margin-top: 6px;
    border-top: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.module-button {
    position: relative;
    width: 60px;
    height: 58px;
    border-radius: var(--radius-button);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--text-muted);
    transition:
        background var(--duration-quick) var(--easing-standard),
        color      var(--duration-quick) var(--easing-standard);
}

.module-button__label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}

.module-button:hover {
    background: var(--surface-navigation-rail-hover);
    color: var(--text-primary);
}

.module-button--active {
    color: var(--accent);
    background: var(--accent-tint);
}

.module-button--active .module-button__label {
    font-weight: 600;
}

.module-button--active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 26px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(
        180deg,
        var(--brand-gradient-middle),
        var(--brand-gradient-end)
    );
}

.module-button__icon {
    transition: transform var(--duration-quick) var(--easing-standard);
}

.module-button:active .module-button__icon {
    transform: scale(0.88);
}


/* =============================================================================
   SUB NAVIGATION PANEL
   ============================================================================= */

.sub-navigation {
    width: 0;
    flex: none;
    background: var(--surface-panel);
    overflow: hidden;
    box-shadow: var(--shadow-sub-navigation);
    z-index: 40;
    transition: width var(--duration-sub-navigation) var(--easing-standard);
}

.sub-navigation--open {
    width: var(--width-sub-navigation-panel);
}

/* Closing: fade out immediately, with no delay to sit through. */
.sub-navigation__inner {
    width: var(--width-sub-navigation-panel);
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(-12px);
    transition:
        opacity   var(--duration-instant) var(--easing-standard),
        transform var(--duration-quick)   var(--easing-standard);
}

/* Opening: fade in just behind the width animation. */
.sub-navigation--open .sub-navigation__inner {
    opacity: 1;
    transform: none;
    transition:
        opacity   260ms var(--easing-standard) 80ms,
        transform 320ms var(--easing-standard) 50ms;
}

/* Switching module to module: panel holds its width, contents cross-fade. */
.sub-navigation--open .sub-navigation__inner--swapping {
    opacity: 0;
    transform: translateX(-10px);
    transition:
        opacity   150ms var(--easing-standard),
        transform 150ms var(--easing-standard);
}

.sub-navigation__header {
    height: 52px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 18px;
    border-bottom: 1px solid var(--border-subtle);
}

.sub-navigation__title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    flex: 1;
}

.sub-navigation__collapse-button {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-button);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    transition:
        background var(--duration-instant) var(--easing-standard),
        color      var(--duration-instant) var(--easing-standard);
}

.sub-navigation__collapse-button:hover {
    background: var(--border-subtle);
    color: var(--text-primary);
}

.sub-navigation__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px 16px;
}

@keyframes navigationItemEnter {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes navigationGroupEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.navigation-group {
    animation: navigationGroupEnter 300ms var(--easing-standard) both;
}

.navigation-group + .navigation-group {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}

.navigation-group--secondary .navigation-item {
    color: var(--text-muted);
}

.navigation-group--secondary .navigation-item__icon {
    opacity: 0.72;
}

.navigation-item {
    width: 100%;
    height: 36px;
    border-radius: var(--radius-button);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 10px;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    position: relative;
    animation: navigationItemEnter 340ms var(--easing-standard) both;
    transition:
        background var(--duration-instant) var(--easing-standard),
        color      var(--duration-instant) var(--easing-standard);
}

.navigation-item:hover {
    background: var(--border-subtle);
    color: var(--text-primary);
}

.navigation-item__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navigation-item__icon {
    color: currentColor;
    opacity: 0.85;
}

.navigation-item__chevron {
    color: var(--text-muted);
    opacity: 0;
    margin-right: 1px;
    transition: transform 240ms var(--easing-standard);
}

.navigation-item:hover .navigation-item__chevron {
    opacity: 1;
}

.navigation-item--expandable .navigation-item__chevron {
    opacity: 0.6;
}

.navigation-item--expanded .navigation-item__chevron {
    transform: rotate(90deg);
    opacity: 1;
}

.navigation-item--expanded {
    color: var(--text-primary);
    font-weight: 600;
}

.navigation-item--selected {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
}

.navigation-item--selected .navigation-item__icon {
    opacity: 1;
}

.navigation-item__quick-add {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-button);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    opacity: 0;
    margin-right: -2px;
    transition:
        opacity    var(--duration-instant) var(--easing-standard),
        background var(--duration-instant) var(--easing-standard),
        color      var(--duration-instant) var(--easing-standard);
}

.navigation-item:hover .navigation-item__quick-add {
    opacity: 1;
}

.navigation-item__quick-add:hover {
    background: #e4e7ea;
    color: var(--text-primary);
}

/* --- Third level ------------------------------------------------------- */

.navigation-children {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms var(--easing-standard);
}

.navigation-children > div {
    overflow: hidden;
    min-height: 0;
}

.navigation-item--expanded + .navigation-children {
    grid-template-rows: 1fr;
}

.navigation-children__list {
    padding: 3px 0 5px 20px;
    position: relative;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity   var(--duration-instant) var(--easing-standard),
        transform 180ms                   var(--easing-standard);
}

.navigation-item--expanded + .navigation-children .navigation-children__list {
    opacity: 1;
    transform: none;
    transition:
        opacity   260ms var(--easing-standard) 80ms,
        transform 300ms var(--easing-standard) 60ms;
}

.navigation-children__list::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 6px;
    bottom: 10px;
    width: 1.5px;
    background: var(--border-default);
    border-radius: 2px;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 160ms var(--easing-standard);
}

.navigation-item--expanded + .navigation-children .navigation-children__list::before {
    transform: scaleY(1);
    transition: transform 340ms var(--easing-standard) 60ms;
}

.navigation-child {
    width: 100%;
    height: 32px;
    border-radius: var(--radius-small);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 16px;
    font-size: 13px;
    font-weight: 450;
    color: var(--text-muted);
    text-align: left;
    position: relative;
    transition:
        background var(--duration-instant) var(--easing-standard),
        color      var(--duration-instant) var(--easing-standard);
}

.navigation-child::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 1.5px;
    background: var(--border-default);
    border-radius: 2px;
    transition:
        background var(--duration-instant) var(--easing-standard),
        width      var(--duration-instant) var(--easing-standard);
}

.navigation-child:hover {
    background: var(--border-subtle);
    color: var(--text-primary);
}

.navigation-child:hover::before {
    background: #c9ced3;
}

.navigation-child--selected {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
}

.navigation-child--selected::before {
    background: var(--accent);
    width: 8px;
}

/* A small gap between sub nav items, so a hovered item never runs into the
   selected one beside it (Leone, 17 Oct). Console and platform alike. */
.navigation-child + .navigation-child { margin-top: 3px; }


/* =============================================================================
   CONTENT REGION
   ============================================================================= */

.content-region {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Pages run full bleed. There is no breadcrumb bar and no gutter - the sub
   navigation panel already says where you are, and a screen full of data is
   worth more than a frame around it. */
.content-stage {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1180px) {
    .global-search__field--expanded { width: 260px; }
    .global-search__results         { width: 300px; }
}

/* =============================================================================
   BURGER MENU

   Hidden on desktop, where the rail is always visible and a burger would be
   pointless furniture.
   ============================================================================= */

.navigation-menu-button {
    display: none;
    margin-left: 8px;
    flex: none;
}

.navigation-scrim {
    position: fixed;
    top: var(--height-top-header);
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(10, 12, 16, 0.44);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    z-index: 44;
    transition: opacity var(--duration-quick) var(--easing-standard);
}

.navigation-scrim--visible {
    opacity: 1;
    pointer-events: auto;
}


/* -----------------------------------------------------------------------------
   TABLET AND BELOW

   The rail and the sub-navigation both come off the layout and slide over the
   content from the left. At this width, 80px of rail plus 272px of panel leaves
   too little room for a table to be worth reading, so the content keeps the
   full width and the navigation visits it.
   ----------------------------------------------------------------------------- */

@media (max-width: 900px) {
    /* -------------------------------------------------------------------------
       The page scrolls as one document from here down.

       On a desktop the page header and toolbar stay put and only the list
       moves inside them. That arrangement depends on there being room left
       over for the list. On a phone the chrome above it - header, description,
       toolbar, five stacked counters - is taller than the viewport on its own,
       so the list was handed what was left, which was nothing, and every
       container involved had `overflow: hidden`. The result was a screen that
       showed no rows and refused to scroll.

       So the stage becomes the scroller and the page grows to its content.
       Sticky headings still work: they stick to this container instead.
       ------------------------------------------------------------------------- */
    .content-stage {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header-date-chip { display: none; }

    .navigation-menu-button   { display: grid; }

    .top-header               { padding-right: 8px; }
    .top-header__brand        { padding-left: 10px; margin-right: 4px; }
    .top-header__actions      { gap: 4px; margin-left: 6px; }
    .top-header__utilities    { gap: 2px; }
    .brand-mark               { font-size: 17px; }

    .header-icon-button,
    .header-user-avatar       { width: 34px; height: 34px; }

    .module-button            { width: 54px; height: 52px; gap: 4px; }
    .module-button__label     { font-size: 9px; }

    .navigation-rail__primary,
    .navigation-rail__secondary { padding-left: 7px; padding-right: 7px; }

    /* The rail slides out of view rather than being display:none, so it can
       animate and so its buttons stay in the accessibility tree. */
    .navigation-rail {
        position: fixed;
        top: var(--height-top-header);
        bottom: 0;
        left: 0;
        z-index: 46;
        transform: translateX(-100%);
        transition: transform var(--duration-panel-open) var(--easing-standard);
        box-shadow: var(--shadow-sub-navigation);
    }

    .navigation-rail--open {
        transform: translateX(0);
    }

    .sub-navigation {
        position: fixed;
        top: var(--height-top-header);
        bottom: 0;
        left: var(--width-navigation-rail);
        width: 0;
        z-index: 45;
        transform: translateX(-100%);
        transition:
            transform var(--duration-panel-open)   var(--easing-standard),
            width     var(--duration-sub-navigation) var(--easing-standard);
    }

    /* The sub-navigation only rides in alongside an open rail. Without this it
       would appear on its own, floating against the left edge with nothing to
       belong to. */
    .navigation-rail--open ~ .sub-navigation--open {
        transform: translateX(0);
        width: var(--width-sub-navigation-panel);
    }

    .sub-navigation__header   { height: 46px; padding-left: 14px; }
    .sub-navigation__title    { font-size: var(--font-size-medium); }
    .navigation-item          { height: 38px; font-size: var(--font-size-base); }
    .navigation-child         { height: 34px; font-size: var(--font-size-small); }

    /* Stops the page behind scrolling while the navigation is over it. */
    body.navigation-is-open { overflow: hidden; }
}

/* -----------------------------------------------------------------------------
   PHONE

   The search box cannot expand inline in a 360px header without pushing the
   utility icons off screen, so it takes the full header width while open and
   the other controls step aside.
   ----------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .top-header__brand .brand-mark__suffix { display: none; }

    /* -------------------------------------------------------------------------
       The header, reduced to what fits

       Eleven controls need roughly 450px. A phone gives 390. The header does not
       wrap, so the overflow pushed the whole application-shell wider than the
       viewport and every page appeared cut off at the right - the header was
       the cause and the pages were the symptom.

       What is left is the burger, the brand, notifications and the account. The
       account stays because it holds sign-out, and stranding somebody signed in
       with no way out is worse than one more icon.
       ------------------------------------------------------------------------- */

    .top-header__actions,
    .header-icon-button--desktop-only {
        display: none;
    }

    .top-header            { padding-right: 6px; gap: 2px; }
    .top-header__brand     { padding-left: 8px; margin-right: 0; }
    .top-header__utilities { gap: 4px; }

    /* Nothing in the shell may make the page wider than the screen. A page with
       more table than fits scrolls inside its own box; it does not drag the
       header sideways with it. */
    .application-shell,
    .application-body,
    .content-stage {
        max-width: 100vw;
        min-width: 0;
    }

    .global-search {
        position: static;
    }

    .global-search__field--expanded {
        position: absolute;
        left: 8px;
        right: 8px;
        width: auto;
        z-index: 5;
    }

    .global-search__results {
        left: 8px;
        right: 8px;
        width: auto;
    }

    /* The sub-navigation takes the rest of the screen beside the rail. At this
       width it is a destination in its own right rather than a companion. */
    .navigation-rail--open ~ .sub-navigation--open {
        width: calc(100vw - var(--width-navigation-rail));
    }

    .module-button        { width: 48px; height: 48px; }
    .module-button__label { font-size: 8.5px; }
}


/* A header control can be switched off entirely - the phone icon disappears
   when telephony is disconnected. `.header-icon-button` sets its own display,
   which would otherwise beat the browser's default rule for `hidden` and leave
   a visible button that says it is not there. */
.header-icon-button[hidden] {
    display: none;
}


/* ---- The header plus button's create menu ---------------------------------
   Same visual language as the envelope's mailbox menu: a small fixed card
   under its button, opened on hover, one row per kind of record. Positioned
   by the script against the button's rectangle. */

.header-create-menu {
    position: fixed;
    z-index: 260;
    min-width: 210px;
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-dropdown);
    padding: 6px;
    display: none;
}

.header-create-menu.is-open {
    display: block;
}

.header-create-menu__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.header-create-menu__row:hover {
    background: var(--am-blue-tint);
    color: var(--am-blue);
}

@media (max-width: 560px) {
    .header-create-menu__row { min-height: 44px; }
}

.header-create-menu__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    color: var(--text-secondary);
}

.header-create-menu__row:hover .header-create-menu__icon {
    color: var(--am-blue);
}


/* ---- Reordering the rail ---------------------------------------------------
   Super admins get a Reorder handle at the foot of the rail. In reorder mode
   the primary modules are draggable; the order saves for the whole company. */

.rail-reorder-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 52px;
    margin: 6px auto 10px;
    padding: 7px 0;
    border: 1px dashed var(--border-default, #d5d9de);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted, #8b929b);
    cursor: pointer;
    transition: background var(--duration-instant) var(--easing-standard),
        color var(--duration-instant) var(--easing-standard);
}

.rail-reorder-toggle:hover {
    background: var(--surface-navigation-rail-hover, rgba(0, 0, 0, 0.05));
    color: var(--text-primary, #1f2430);
}

.rail-reorder-toggle.is-active {
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent);
}

.rail-reorder-toggle__label {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.navigation-rail--reordering .module-button {
    cursor: grab;
    outline: 1px dashed var(--border-default, #d5d9de);
    outline-offset: -1px;
}

.navigation-rail--reordering .module-button:active {
    cursor: grabbing;
}

.module-button--dragging {
    opacity: 0.45;
}

/* -----------------------------------------------------------------------------
   THE CONSOLE TAG

   Next to the logo, for platform staff signed in to the platform agency and
   for nobody else. The same small pill the old console wore in its header, so
   the word "Console" means what it always meant.
   ----------------------------------------------------------------------------- */
.console-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* display: flex above would otherwise beat the hidden attribute, and every
   agency would see "Console" in its header. */
.console-brand[hidden] { display: none; }

/* Beside an agency logo when one is set; alone when not. */
.brand-mark:not([hidden]) + .console-brand { margin-left: 14px; }

.console-brand__mark {
    display: inline-flex;
    width: 21px;
    height: 21px;
}

/* RM-080: the short name "AM" beside the icon, set a touch heavier so two
   letters hold their own next to the mark. */
.console-brand__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-on-dark);
}

.console-brand__tag {
    padding: 2px 7px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-chip, 4px);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Staging marker

   environment-config.js sets data-environment="staging" on <html> when the page
   is running against the staging database. A small fixed pill, out of the way
   of every control, so a screenshot or a busy afternoon can never pass staging
   off as live. Never shown on live: the attribute is not set there.
   ----------------------------------------------------------------------------- */
html[data-environment="staging"] body::after {
    content: "Staging";
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 2147483000;
    padding: 4px 10px;
    border-radius: var(--radius-chip, 4px);
    background: #f59e0b;
    color: #1f1300;
    font: 700 11px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}