/* #31774# header font as on the production site (must precede every rule) */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap");

/* #31799# Open Iconic removed: its icon classes (.oi-audio, .oi-chat, .oi-map) collided with the reskin's oi- prefix and
   drew a missing-font glyph (hollow box) before the audio pill; nothing on the site used the icon set. */

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.k-dialog .k-dialog-button-layout-stretched {
    flex-direction: column;
}

/* #19977# the old rule hid every .sidebar under 641px, which removed the menu and the
   call/map buttons on phones; the phone layout now lives in MainLayout.razor.css */
@media (max-width: 768px) {
    .navbar-toggler {
        display: none;
    }
}

/* Region Selector */
/* Can't use Balzor CSS isolation */

.RegionSelector .btn.btn-primary {
    margin: 5px;
}

.RegionSelector .btn.btn-primary.disabled {
    background-color: grey;
    color: darkgray;
    border-color: grey;
}

.RegionSelector .btn.btn-primary.selected {
    background-color: var(--ifs-accent, limegreen);   /* #16335# */
    border-color: var(--ifs-accent, limegreen);
}

/* #29860# Right-hand panel buttons - same shape as "Report a fault" (full width, solid
   colour, white text), colour-coded: map green, call blue, chat yellow.
   Global because the buttons live in three different isolated components. */
.rh-btn {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.rh-btn .oi,
.rh-btn .fa-solid {
    margin-right: .35rem;
}

/* #31732# social icons in their standard brand colours everywhere (home page and footer) */
.fa-square-facebook {
    color: #1877F2;
}

.fa-square-x-twitter {
    color: #000;
}

.rh-btn-map {
    background-color: #1bba11;
    border-color: #1bba11;
}

.rh-btn-call {
    background-color: #2e72b1;
    border-color: #2e72b1;
}

.rh-btn-chat {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #1a1a1c;
}

/* #29640# Report a fault leads the right-hand panel on desktop (31732); the selector
   matches the theme's .NavRightMenu .oi-tile--call so it beats the generic white button rule */
.NavRightMenu .oi-tile--report {
    background: var(--oi-tile-report, #e84c3d);
    color: #fff;
    border-color: transparent;
}

.rh-btn:hover {
    filter: brightness(0.9);
}

/* #29860# collapse/expand toggle for the right-hand panel */
.rh-panel-toggle:hover {
    background-color: var(--ifs-accent, #9e9e9e);   /* #16335# */
    color: #fff;
}

.rh-panel-toggle {
    display: block;
    width: 100%;
    padding: .25rem 0;
    border: none;
    border-radius: 15px 15px 0 0;
    background-color: #f0f0f0;
    color: #1a1a1c;
    font-weight: bold;
    letter-spacing: .1em;
    cursor: pointer;
}

/* Blazorise Toasts */
div.toast-header {
    display: none;
}

div.toast-body {
    text-align: center;
    align-content: center;
    background-color: lightgreen;
    font-weight: bold;
}

/* #29640# reskin support: things the theme stylesheet (css/outageinfo-theme.css, loaded last)
   does not know about in this app. Colours stay in the theme's tokens. */
.top-logo-container img {
    max-height: 40px;
    width: auto;
}

.top-logo-container .logo-mobile {
    display: none;
}

.top-subtitle {
    display: block;
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
    margin-top: 2px;
}

/* #31765# shared slide-up sheet (guide 7.3) - the chat sheet's mechanics from the theme,
   generalised: full-screen below 1101px, docked bottom-right panel on desktop */
.oi-sheet {
    --sheet: var(--oi-brand, #1b6cc9);
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: #EEF2F7;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .24s ease, visibility 0s linear .38s;
}

.oi-sheet.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .2s ease, visibility 0s linear 0s;
}

.oi-sheet--txt { --sheet: var(--oi-txt-green, #00a651); }
.oi-sheet--map { --sheet: var(--oi-tile-map, #1f9d78); }

.oi-sheet .sh-head {
    display: grid;
    grid-template-columns: 44px 1fr 40px;
    align-items: center;
    gap: 12px;
    background: linear-gradient(120deg, var(--sheet), color-mix(in srgb, var(--sheet) 65%, #000));
    color: #fff;
    padding: 14px;
    flex: 0 0 auto;
}

.oi-sheet .sh-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.oi-sheet .sh-who strong {
    display: block;
    font-family: var(--oi-display, inherit);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
}

.oi-sheet .sh-who span {
    display: block;
    font-size: .78rem;
    opacity: .9;
    margin-top: 2px;
}

.oi-sheet .sh-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border: 0;
    padding: 0;
}

.oi-sheet .sh-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 14px;
}

.oi-sheet .sh-intro {
    margin: 0 0 12px;
    color: #33404f;
    line-height: 1.45;
}

/* the map fills the sheet body; Leaflet is re-measured after the slide-in (mainMap.repaint) */
.oi-sheet--map .sh-body {
    padding: 0;
    display: flex;
}

.oi-sheet--map .oi-map-fill,
.oi-sheet--map .oi-map-fill .leafletMap,
.oi-sheet--map #IfsMap {
    flex: 1 1 auto;
    width: 100%;
    height: 100% !important;
    min-height: 0;
}

.oi-sheet--map .map-splitter {
    display: none !important;
}

body.oi-sheet-open {
    overflow: hidden;
}

/* #31774# desktop header: the theme's dark banner stays (its background rule loads later and
   wins), so the text is tuned for it - Outage Title and subtitle centred both ways in the space
   between the logo and the number, secondary text light enough to read on navy */
@media (min-width: 1101px) {
    /* #31774# ~114125: dark text on a white card, as outages.waipanetworks.co.nz; the theme's
       navy gradient loads after app.css so these need !important */
    .top-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        background: #fff !important;
        border: 1px solid #c4c4c4;
        box-shadow: none !important;
        color: #1a1a1c !important;
        font-family: 'Open Sans', sans-serif;
    }

    .top-logo-container {
        background: transparent !important;
        padding: 0 !important;
    }

    .top-title-container h1 strong:not([style*="color"]) {
        color: #1a1a1c;
    }

    .top-number-container h1 strong {
        background: transparent !important;
        color: #1a1a1c !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
        font-size: clamp(1.6rem, 1rem + 1.4vw, 2.4rem);
    }

    .top-logo-container {
        justify-self: start;
    }

    .top-number-container {
        justify-self: end;
        margin-left: 0 !important;
    }

    .top-title-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-width: 0;
    }

    .top-title-container h1 {
        font-family: 'Open Sans', sans-serif;
        font-weight: 700;
    }

    .top-subtitle {
        display: block;
        color: #555 !important;
        font-size: 1rem;
        margin-top: 4px;
    }

    .top-number-container span,
    .top-number-container .phone-sub-text {
        color: #555 !important;
        text-transform: none;
        letter-spacing: .02em;
        font-size: .95rem;
    }

    /* footer: copyright left, Facebook / X icons right, all on one centred baseline */
    .bottom-row footer {
        flex: 1 1 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .bottom-row footer .clearfix {
        display: contents;
    }

    .bottom-row footer .fa-pull-left,
    .bottom-row footer .fa-pull-right {
        float: none !important;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .bottom-row footer .fa-pull-right a {
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }
}

@media (min-width: 1101px) {
    .oi-sheet {
        inset: auto 24px 24px auto;
        width: 392px;
        max-height: min(620px, 82vh);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 30px 70px -20px rgba(10,20,35,.45);
        transform: translateY(22px) scale(.97);
    }

    .oi-sheet.is-open {
        transform: translateY(0) scale(1);
    }

    /* #31773# dialogs open centred on the page (sheet, chat, call), then can be dragged by
       their header (OiUi.js). Overrides the theme's bottom-right docking. */
    .oi-sheet,
    .oi-chat,
    .oi-call {
        inset: 50% auto auto 50% !important;   /* #31778# the theme's bottom-right docking loads later */
        margin-left: -196px;
        transform: translateY(calc(-50% + 22px)) scale(.97) !important;
    }

    .oi-sheet.is-open,
    .oi-chat.is-open,
    .oi-call.is-open {
        transform: translateY(-50%) scale(1) !important;
    }

    /* while dragging, OiUi.js positions the dialog with inline !important left/top (31794);
       only the theme's right/bottom docking must be released here - never left/top */
    .oi-sheet.is-dragging,
    .oi-chat.is-dragging,
    .oi-call.is-dragging {
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* #31794# ~Tim: the theme's .42s transform transition (loaded later) animated the switch from
       the centred transform to the dragged position on the first grab - the dialog jumped, then
       came back. No transitions while dragging, and !important so the theme cannot restore them. */
    .oi-sheet.is-dragging,
    .oi-chat.is-dragging,
    .oi-call.is-dragging {
        transition: none !important;
        animation: none !important;
        user-select: none;
    }

    .oi-sheet .sh-head,
    .oi-chat .ch-head,
    .oi-call .cl-head {
        cursor: move;
    }

    /* desktop scrolls the page, not the body, while a small docked sheet is open */
    body.oi-sheet-open {
        overflow: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oi-sheet {
        transition: opacity .01s;
        transform: none;
    }
}

/* #31767# call sheet states the theme does not model: connecting and failed (guide 9) */
.oi-call .st-connecting,
.oi-call .st-failed {
    display: none;
}

.oi-call.is-connecting .st-idle,
.oi-call.is-failed .st-idle {
    display: none;
}

.oi-call.is-connecting .st-connecting {
    display: inline;
}

/* #31967# while connecting the red Hang up replaces the green Call, so the visitor can stop a
   call that is taking too long to connect (the theme only swaps them once connected) */
.oi-call.is-connecting .cl-call {
    display: none;
}

.oi-call.is-connecting .cl-end {
    display: flex;
}

.oi-call.is-failed .st-failed {
    display: inline;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    font-size: .85rem;
    color: #FFC46B;
}

.oi-call.is-failed .st-failed a {
    color: #fff;
    text-decoration: underline;
}

.oi-call.is-failed .cl-call::after {
    display: none;
}

.oi-call .cl-retry {
    background: #1B6CC9;
    box-shadow: 0 10px 26px -8px rgba(27,108,201,.7);
}

.oi-call .cl-retry::after {
    display: none;
}

.oi-call .cl-call em,
.oi-call .cl-end em {
    position: absolute;
    top: 100%;
    margin-top: 8px;
    font-style: normal;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #C9D8EA;
    white-space: nowrap;
}

.oi-call .cl-key i {
    display: block;
    min-height: 1em;   /* #31769# keys without letters (1 * #) keep the same digit position as the rest */
}

.oi-call .cl-key[disabled],
.oi-call .cl-mini[disabled] {
    opacity: .45;
    cursor: default;
}

.oi-call .cl-pad--none {
    flex: 1 1 auto;
}

/* #31766# chat sheet extras the theme does not define: system messages as a chip, offline state */
.oi-chat .ch-system {
    max-width: 90%;
    text-align: center;
    background: #FFF4E5;
    color: #7A4B00;
}

.oi-chat .ch-who span.offline::before {
    background: #9AA7B8;
    box-shadow: none;
}

.oi-chat .ch-foot input[disabled],
.oi-chat .ch-send[disabled] {
    opacity: .55;
    cursor: default;
}

/* #31765# detail page: the real audio player inside the theme's pill; the paired actions
   are <button>/<a> mixes, so give the button the anchor's reset */
/* #31784# compact one-row player: play button | label + always-visible seek bar | time.
   The theme's .oi-audio pill (padding 10px 16px, margin 16px) took two rows plus the browser's
   50px control; !important because the theme stylesheet loads after this one. */
.oi-audio {
    padding: 6px 12px !important;
    margin: 8px 14px !important;
}

.oi-audio audio {
    display: none;
}

.oi-audio .player-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
}

.oi-audio .ap-toggle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--ifs-accent, #12355B);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.oi-audio .ap-toggle svg {
    width: 20px;
    height: 20px;
}

.oi-audio .ap-pause,
.oi-audio .player-box.is-playing .ap-play {
    display: none;
}

.oi-audio .player-box.is-playing .ap-pause {
    display: block;
}

.oi-audio .ap-body {
    flex: 1 1 auto;
    min-width: 0;
}

.oi-audio .ap-label {
    display: block;
    font-size: .8rem;
    font-style: italic;
    color: #555;
    line-height: 1.2;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oi-audio .ap-time {
    flex: 0 0 auto;
    font-size: .8rem;
    color: #333;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* the seek bar: played part in the tenant accent, marker always drawn (the native control
   only showed it on hover) */
.oi-audio .ap-seek {
    --ap-pct: 0%;
    display: block;
    width: 100%;
    height: 14px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.oi-audio .ap-seek:focus-visible {
    outline: 2px solid var(--ifs-accent, #12355B);
    outline-offset: 2px;
}

.oi-audio .ap-seek::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(to right, var(--ifs-accent, #12355B) var(--ap-pct), #c9cfd8 var(--ap-pct));
}

.oi-audio .ap-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4px;
    border-radius: 50%;
    background: #333;
    border: 0;
}

.oi-audio .ap-seek::-moz-range-track {
    height: 6px;
    border-radius: 6px;
    background: #c9cfd8;
}

.oi-audio .ap-seek::-moz-range-progress {
    height: 6px;
    border-radius: 6px;
    background: var(--ifs-accent, #12355B);
}

.oi-audio .ap-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #333;
    border: 0;
}

.oi-actions button.oi-act {
    border: 0;
    font-family: inherit;
    text-align: left;
    width: 100%;
}

.oi-near .oi-near-link {
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
}

.oi-near .refresh[disabled] {
    opacity: .6;
    cursor: default;
}

/* #31770# tab page with no locality chosen (desktop) */
.oi-empty {
    padding: 40px 22px;
    text-align: center;
    color: #33404f;
    font-size: 1.1rem;
}

/* #31774# a lone action button spans the full width when the tenant has the other one off */
.oi-actions .oi-act:only-child {
    grid-column: 1 / -1;
}

/* #31774# menu highlights (desktop): Weather = the tenant's highlight colour, General Information = the
   TEXT ME UPDATES green; the theme's grey hover is overridden for these two.
   #31797# desktop only: on a phone the tap left :hover stuck, so the tile went solid green/red
   and lost its icon column and hint */
@media (hover: hover) and (min-width: 1101px) {
    .NavLeftMenu .nav-link.oi-tile--weather:hover,
    .NavLeftMenu .nav-link.oi-tile--weather.active {
        background: var(--ifs-accent, #1bba11) !important;
        color: #fff !important;
    }

    .NavLeftMenu .nav-link.oi-tile--info:hover,
    .NavLeftMenu .nav-link.oi-tile--info.active {
        background: var(--oi-txt-green, #00a651) !important;
        color: #fff !important;
    }
}

/* #31773# no coloured dots beside Current / Planned Outages on desktop (Andrew) */
.NavLeftMenu .nav-link.current-fault::before,
.NavLeftMenu .nav-link.planned-fault::before {
    content: none !important;   /* the theme loads after app.css at equal specificity, so !important is required */
}

/* #31773# call status "Connected - 00:12" centred above the dialpad */
.oi-call .cl-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* #31797# ~Tim: the hidden " - Muted" suffix kept its width (visibility:hidden), so the connected
   line sat left of centre; take it out of the flow until the call is actually muted */
.oi-call .st-muted {
    display: none;
}

.oi-call.is-muted .st-muted {
    display: inline;
    visibility: visible;
}

.oi-call.is-connected .st-live {
    justify-content: center;
}

/* #31962# the call status row was small and muted; make it bold, larger and colour-coded so
   the caller can see what is happening, especially while a connection is slow: amber while
   connecting, green (the call button's colour) when connected, red once ended or failed.
   .is-open raises specificity over the theme's .oi-call .cl-hint, which loads after app.css */
.oi-call.is-open .cl-hint {
    font-size: clamp(.74rem, 3.4vmin, .88rem);
    font-weight: 800;
    color: #E4E9F0;
}

.oi-call.is-connecting .cl-hint {
    color: #FFC46B;
}

.oi-call.is-connected .cl-hint {
    color: #3DDC84;
}

.oi-call.is-connected .st-muted {
    color: #FFC46B;
}

.oi-call.is-ended .cl-hint,
.oi-call.is-failed .cl-hint {
    color: #FF8A8A;
}

.oi-call.is-failed .st-failed {
    font-weight: 700;
}

/* #31821# outage link inside a chat bubble: its own line, underlined, agent-bubble colours */
.oi-chat .ch-msg .bubble .ch-link {
    display: block;
    margin-top: 8px;
    font-weight: 700;
    color: var(--oi-primary, #1b6cc9);
    text-decoration: underline;
}

.oi-chat .ch-msg.user .bubble .ch-link {
    color: #fff;
}

/* #31773# audio pill: no dead space around the native player */
/* #31769# locality flyout: plain names, no coloured outage dots (those mark the two top-level entries) */
.NavLeftMenu .nav-item ul.nav .nav-link::before {
    content: none;
}

/* #31932# General Information: the heading list sizes to its longest heading (up to 45%) so
   headings stay on one line instead of wrapping inside a fixed quarter-width column */
@media (min-width: 768px) {
    .gen-info {
        display: flex;
        gap: 24px;
    }

    .gen-info .article-list {
        flex: 0 0 auto;
        width: auto;
        max-width: 45%;
        float: none;
    }

    .gen-info .article-content {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        float: none;
    }
}

/* #29640# desktop grid variants: "Hide panel" (29860) shrinks the actions column to the toggle
   strip so the content pane widens; a tenant with no actions at all gets two columns (guide 5.5) */
@media (min-width: 1101px) {
    .main.rh-collapsed {
        grid-template-columns: var(--oi-nav-w) minmax(0, 1fr) 40px;
    }

    .main.no-actions {
        grid-template-columns: var(--oi-nav-w) minmax(0, 1fr);
        grid-template-areas: "nav content";
    }
}

@media (max-width: 1100px) {
    /* #31797# General Information on a phone: header without the hero, the article instead of
       the tile grid (the logo is the way home, as on the detail pages) */
    .page.oi-view-info .top-row .top-title-container {
        display: none;
    }

    .page.oi-view-info .main .NavLeftMenu,
    .page.oi-view-info .main .sidebar:last-child {
        display: none !important;
    }

    .page.oi-view-info .main .main-content {
        display: block;
    }

    /* #31797# the call/chat sheets fill the layout viewport; with interactive-widget=resizes-content
       (index.html) that viewport shrinks when the keyboard opens, so the chat input stays above it */
    .oi-chat,
    .oi-call {
        height: 100dvh;
    }

    /* the theme's hero band carries its own subtitle text */
    .top-subtitle {
        display: none;
    }

    /* header bar as in the screens doc: small logo left, number + line text right, one row;
       the hero (title container) wraps to its own full-width row underneath */
    .top-logo-container .logo-desktop {
        display: none;
    }

    .top-logo-container .logo-mobile {
        display: inline-block;
        max-height: 44px;
        width: auto;
    }

    .top-row > .top-logo-container {
        flex: 0 0 auto !important;
        order: 1;
    }

    .top-row > .top-number-container {
        flex: 1 1 0 !important;
        min-width: 0;
        order: 2;
        text-align: right;
    }

    .top-row > .top-title-container {
        order: 3;
        flex: 1 0 100% !important;
    }

    .top-number-container h1 {
        font-size: 1.45rem;
    }

    .top-number-container .phone-sub-text {
        display: block;
        white-space: normal;
    }

    /* desktop-only chrome: right-panel collapse toggle (29860), map drag handle (29859) */
    .rh-panel-toggle,
    .map-splitter {
        display: none !important;
    }

    /* the theme paints tile icons itself; the Font Awesome desktop icons are decorative */
    .nav-icon,
    .rh-btn .fa-solid {
        display: none !important;
    }

    /* #31770# the desktop hover flyout of localities must never appear on a phone (a tap on the
       tab counts as hover); the SELECT AN AREA dropdown replaces it */
    .NavLeftMenu .nav-item ul.nav,
    .NavLeftMenu .vertical-nav ul li:hover ul.nav.flex-column {
        display: none !important;
    }

    /* #31770# tab page with no locality chosen */
    .oi-empty {
        padding: 40px 22px;
        text-align: center;
        color: #33404f;
        font-size: 1.15rem;
        line-height: 1.5;
    }

    /* Report a fault is the third tile (guide 5.1, Mobile Screens): the nav card's .btn-fault
       copy is shown here and the desktop top-right button is not (Andrew, 29640 ~114034) */
    .NavRightMenu li.nav-item:has(> .oi-tile--report) {
        display: none !important;
    }

    .NavLeftMenu > .btn-fault {
        display: block !important;
    }

    /* right-hand action tiles span the column (NavRightMenu's scoped .nav-item is 200px wide) */
    .NavRightMenu .nav-item {
        width: 100% !important;
    }


    /* fixed-height desktop panes become flowing blocks on phones */
    .page,
    .top-row,
    .sidebar,
    .main-content {
        height: auto !important;
    }

    .main-content {
        margin: 0 !important;
        overflow: visible !important;
    }

    .right-sidebar.collapsed {
        width: auto !important;
        min-width: 0 !important;
    }

    /* the collapse wrapper only - never other hidden elements such as the #chat placeholder */
    .right-sidebar .rh-panel-body[hidden] {
        display: block !important;
    }
}