/* =============================================================================
   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
   ============================================================================= */

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

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

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


/* =============================================================================
   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: #8e949c;
}

.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: #6b7078;
}

.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: #1e1e24;
    border: 1px solid #2e2e36;
    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;
}


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