/* ===========================================================================
   ArchEx One - the one bar across the top of every screen (6 October 2026)
   ===========================================================================

   Adam Deane, after showing Louisa the app: "I'm just so overwhelmed, its no where near as easy as servicem8 ...
   i just want it all to work as one, look as one." ServiceM8 keeps five words across the top of every screen and
   nothing down the side. So does ArchEx now:

     * the logo and the five doors (Today, Jobs, Schedule, Inbox, Finance) and More share ONE white bar, and the page
       gets the full width beneath it;
     * the dark rail that filled the left-hand column is the menu that slides out on a tablet or a narrow window -
       the same doors, the same groups (AppNavigation draws both);
     * where you are is FILLED IN, in charcoal; orange stays the colour of the one thing to do (New job).

   Tokens only - every value comes from archex-foundation.css. Loaded after it, because it re-lays the shell the
   foundation first drew; the only !important here undoes another file's (see section 5).
   =========================================================================== */

/* ---- 1. The shell: one bar, then the page --------------------------------- */

.ax-app {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "brandbar  topbar"
        "workspace workspace";
}

.ax-app-brandbar {
    justify-content: flex-start;
    padding: 0 var(--archex-gap-4) 0 var(--archex-page-gutter);
}

.ax-app-brandbar img,
.ax-app[data-rail="collapsed"] .ax-app-brandbar img { height: 32px; }

.ax-app-topbar {
    gap: var(--archex-gap-2);
    padding: 0 var(--archex-page-gutter) 0 var(--archex-gap-2);
}

/* ---- 2. The menu that slides out (everything narrower than a desktop) ------ */

.ax-app-rail {
    position: fixed;
    inset: 0 auto 0 0;
    top: 0;
    z-index: 90;
    width: min(320px, 86vw);
    height: auto;
    padding-top: var(--archex-gap-5);
    transform: translateX(-100%);
    transition: transform 180ms ease;
}

.ax-app[data-drawer="open"] .ax-app-rail { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .4); }

.ax-app[data-drawer="open"] .ax-rail-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 85;
    background: rgba(20, 20, 20, .45);
    border: none;
}

/* The slide-out menu is always the labelled version, whatever an old "collapsed" choice says. */
.ax-app[data-rail="collapsed"] .ax-nav-text,
.ax-app[data-rail="collapsed"] .ax-nav-title,
.ax-app[data-rail="collapsed"] .ax-devsection > summary .ax-nav-text,
.ax-app[data-rail="collapsed"] .ax-devnote { display: initial; }

.ax-app[data-rail="collapsed"] .ax-nav-link { justify-content: flex-start; padding-left: var(--archex-gap-3); padding-right: var(--archex-gap-3); }
.ax-app[data-rail="collapsed"] .ax-nav-group { padding-top: 0; border-top: none; }

/* Where you are, in the dark menu: lit, not orange. Orange is the colour of the one thing to do (New job), as it is
   in the bar across the top; a thin orange edge says "here" without saying "press me". */
.ax-app-rail .ax-nav-link.active,
.ax-app-rail .ax-nav-link.active:hover {
    background: rgba(255, 255, 255, .14);
    color: #FFF;
    box-shadow: inset 3px 0 0 var(--archex-ochre);
}

.ax-nav-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--archex-radius-pill);
    background: var(--archex-ochre);
    color: #FFF;
    font-size: var(--archex-text-xs);
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .ax-app-rail { transition: none; }
}

/* ---- 3. The five doors ----------------------------------------------------- */

.ax-places {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.ax-place {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--archex-gap-2);
    height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: var(--archex-radius-pill);
    background: transparent;
    color: var(--archex-text);
    font-family: var(--archex-font-heading);
    font-size: var(--archex-text-base);
    font-weight: 700;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    transition: background 120ms ease, color 120ms ease;
}

.ax-place::-webkit-details-marker { display: none; }
.ax-place:hover { background: var(--archex-panel); color: var(--archex-text); }

/* Where you are: filled in, from across the room. */
.ax-place.is-here,
.ax-place.is-here:hover {
    background: var(--archex-charcoal);
    color: #FFF;
}

/* Words carry the bar on a desktop, as ServiceM8's do; the icons are for the slide-out menu, where a column of them
   is scanned rather than read. They come back on a wide screen, where there is room for both. */
.ax-place-icon { display: none; }
.ax-place-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ax-place-badge {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--archex-radius-pill);
    background: var(--archex-ochre);
    color: #FFF;
    font-family: var(--archex-font-ui);
    font-size: var(--archex-text-xs);
    font-weight: 800;
}

.ax-place-chev { display: inline-flex; margin-left: -2px; }
.ax-place-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 140ms ease; }
.ax-more[open] .ax-place-chev svg { transform: rotate(180deg); }
.ax-more[open] > .ax-place:not(.is-here) { background: var(--archex-panel); }

/* ---- 4. More: everything else, each with one line saying what it is for --- */

/* The panel hangs from the whole bar, centred under it, rather than from the More button: hung from the button it
   ran off the right-hand edge of a 1440px window. */
.ax-more { position: static; }

.ax-more-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    width: min(calc(var(--ax-more-cols, 3) * 270px + 2 * var(--archex-gap-5)), calc(100vw - 2 * var(--archex-page-gutter)));
    max-height: calc(100vh - var(--archex-topbar-h) - 24px);
    overflow-y: auto;
    padding: var(--archex-gap-5);
    border: 1px solid var(--archex-border-soft);
    border-radius: var(--archex-radius-medium);
    background: var(--archex-white);
    box-shadow: var(--archex-shadow-hover);
}

/* Columns rather than a grid, so a long group and two short ones balance instead of leaving a hole beside the long
   one: Work down the first column, People and Money down the second, Running ArchEx down the third. */
.ax-more-grid {
    columns: var(--ax-more-cols, 3) 220px;
    column-gap: var(--archex-gap-5);
}

.ax-more-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    break-inside: avoid;
    margin-bottom: var(--archex-gap-4);
}

.ax-more-group h3 {
    margin: 0 0 var(--archex-gap-2);
    padding: 0 var(--archex-gap-3);
    color: var(--archex-faint);
    font-family: var(--archex-font-ui);
    font-size: var(--archex-text-xs);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ax-more-door {
    display: flex;
    align-items: flex-start;
    gap: var(--archex-gap-3);
    padding: 10px var(--archex-gap-3);
    border-radius: var(--archex-radius-small);
    color: var(--archex-text);
    text-decoration: none;
    transition: background 120ms ease;
}

.ax-more-door:hover { background: var(--archex-panel); color: var(--archex-text); }
.ax-more-door.is-here { background: var(--archex-panel); }

.ax-more-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--archex-canvas);
    color: var(--archex-charcoal);
}

.ax-more-door:hover .ax-more-icon,
.ax-more-door.is-here .ax-more-icon { background: var(--archex-white); color: var(--archex-ochre-strong); }

.ax-more-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ax-more-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ax-more-copy strong { font-size: var(--archex-text-base); font-weight: 700; line-height: 1.3; }
.ax-more-copy small { color: var(--archex-muted); font-size: var(--archex-text-sm); line-height: 1.35; }

.ax-more-building {
    margin-top: var(--archex-gap-4);
    padding-top: var(--archex-gap-3);
    border-top: 1px solid var(--archex-border-soft);
}

.ax-more-building > button {
    border: 0;
    background: transparent;
    color: var(--archex-faint);
    font: inherit;
    font-size: var(--archex-text-sm);
    font-weight: 700;
    cursor: pointer;
    padding: 4px var(--archex-gap-3);
    border-radius: var(--archex-radius-small);
}

.ax-more-building > button:hover { background: var(--archex-panel); color: var(--archex-text); }

.ax-more-building-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--archex-gap-1) var(--archex-gap-2);
    padding: var(--archex-gap-2) var(--archex-gap-3) 0;
}

.ax-more-building-list a {
    padding: 4px 10px;
    border: 1px solid var(--archex-border-soft);
    border-radius: var(--archex-radius-pill);
    color: var(--archex-muted);
    font-size: var(--archex-text-sm);
    text-decoration: none;
}

.ax-more-building-list a:hover { border-color: var(--archex-ochre); color: var(--archex-ochre-strong); }

.ax-more-foot {
    margin: var(--archex-gap-4) 0 0;
    padding: 0 var(--archex-gap-3);
    color: var(--archex-faint);
    font-size: var(--archex-text-sm);
}

/* ---- 5. A job's header: who it is for, on one line ------------------------- */

/* Client, site address and project manager, each label beside its value rather than above it, so the three read as
   one line under the job's name (as a ServiceM8 job card puts its client and address) and the job card starts a
   good deal higher - 74px on a phone, where the three took six lines. */
/* The one !important in this file, and only to undo another: archex-components.css gives every header inside a page
   `margin: 0 0 var(--space-4) !important`, and nothing weaker than an !important of the same weight moves it. */
.ax-projecthead .ax-os-header { margin-bottom: 0 !important; }
.ax-projecthead .ax-projectfacts { gap: var(--archex-gap-1) var(--archex-gap-5); }
.ax-projecthead .ax-projectfacts > div { flex-direction: row; align-items: baseline; gap: var(--archex-gap-2); min-width: 0; }
.ax-projecthead .ax-projectfacts dd { font-weight: 600; overflow-wrap: anywhere; }

/* ---- 6. The rest of the bar ------------------------------------------------ */

.ax-app-topbar .ax-btn-primary { flex-shrink: 0; }

/* The name and role under your picture are a luxury of a wide screen; the picture alone says who is signed in. */
@media (max-width: 1599px) {
    .ax-usermenu-copy { display: none; }
    .ax-clock { display: none; }
}

@media (min-width: 1600px) {
    .ax-place-icon { display: inline-flex; }
}

/* A desktop has the five doors in the bar, so it needs neither the menu button nor a second Inbox button. */
@media (min-width: 1181px) {
    .ax-hamburger { display: none; }
    /* Matched to the foundation's own selectors (with :link and :visited), which would otherwise outrank this. */
    .ax-app-topbar > a.toolbar-inbox,
    .ax-app-topbar > a.toolbar-inbox:link,
    .ax-app-topbar > a.toolbar-inbox:visited { display: none; }
}

@media (max-width: 1365px) {
    .ax-app-topbar > .ax-btn-primary > span { display: none; }
    .ax-place { padding: 0 12px; }
}

/* Anything narrower than a desktop: the menu button opens the slide-out menu, which holds the five doors. */
@media (max-width: 1180px) {
    .ax-places { display: none; }

    .ax-app {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "brandbar  topbar"
            "workspace workspace";
    }

    .ax-app-brandbar { display: flex; order: 0; padding-left: var(--archex-gap-4); }
}

/* A phone opening the office pages: the bar keeps the menu button, the search, New job, the Inbox count, chat, the
   bell and you; the logo steps aside, and Chat with Claude is in the menu (Running ArchEx). At 440px the bell and
   your picture were off the edge of the screen. */
@media (max-width: 720px) {
    .ax-app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "topbar"
            "workspace";
    }

    .ax-app-brandbar { display: none; }

    .ax-app-topbar { gap: 6px; padding: 0 12px 0 6px; }
    .ax-app-topbar .ax-claude-btn { display: none; }
    .ax-app-topbar .ax-usermenu .ax-chev { display: none; }
}