/* The phone shell for the desktop app -- mockup A, 2026-09-13.
 *
 * Linked from index.html rather than injected by its module, and every rule
 * carries a `body ` it does not need for matching. Both are deliberate:
 *
 *  - LINKED, because the rules here take a title band off every page. Injected
 *    by a module at the end of the manifest, the band painted first and
 *    vanished a second later: 185px of the Dispatch page moved up after paint
 *    (browser-checks/load-stability.check.js). A stylesheet in the head is
 *    there before the first paint.
 *  - PREFIXED, because two other sheets style the same elements with
 *    !important at the same specificity -- atlas-mobile-global-search.js lays
 *    the topbar out as a two-column grid, and atlas-panel-theme.css paints the
 *    heading bands. At equal weight the winner is whichever file loaded last,
 *    which is a race (browser-checks/stylesheet-conflicts.check.js names it).
 *    The extra `body` raises specificity by one, so these win wherever they
 *    load from.
 *
 * Its behaviour -- the title text, the search toggle -- is in
 * assets/atlas-phone-shell.js.
 */
@media (max-width:780px){
  /* The backstop. Whatever one page's row grows past the screen -- a pill of
     five words drawn larger on one phone than another, a row that adds up
     wrong -- the document itself never scrolls sideways: the page clips at
     its edge and the fault is a control cut off, not the whole app shifted
     ("Sideways scroll in mobile", twice, 2026-09-27). clip, not hidden, so
     the window still scrolls up and down and sticky bars still stick. Each
     page's own check still has to catch the control. */
  html,body{overflow-x:clip}
  /* --- the bar ---------------------------------------------------------- */
  /* Four columns where the search module sets two, written with the same
     weight it uses, because the alternative is a rule that wins on some
     phones and not others. All four explicit: menu, title, search, bell, and
     every child of the bar is placed into one of them. An unplaced child makes an implicit fifth column
     and the bar pushes the page sideways -- which is exactly what happened
     the first time this was written with three. */
  body .topbar{
    grid-template-columns:auto minmax(0,1fr) 82px 42px!important;
    gap:9px!important;
    align-items:center!important;
  }
  /* The name. One element on every width: the desktop header's own
     #pageTitle, which the router writes, in the phone title's lettering from
     the first paint. There used to be a second one -- #atlasPhoneTitle, built
     beside it by atlas-phone-bar.js once the modules loaded -- and for half a
     second on every load both said "HQ", one over the other, until a module
     hid the first ("Still multiple headers loading ... Don't just cover it
     up", 2026-09-29). Now the phone bar only writes the date under it, in
     #atlasPhoneDate, which is in the markup too.
     browser-checks/the-phone-has-one-title.check.js samples the bar through
     the load. */
  body .topbar .top-left #pageTitle{
    margin:0; font-family:var(--font-display); font-weight:400; font-size:17px; line-height:1.2; letter-spacing:.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    color:#f4f6f8; background:var(--chrome-silver-dark); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.25)) drop-shadow(0 1px 2px rgba(0,0,0,.5));
  }
  /* "closed" is read as "not open" above and below, so the search is the
     folded pill from the first paint. Keyed to the attribute alone, the pill
     sat in column 2 -- the title's -- until atlas-phone-shell.js set it, and
     the title fell to a second row: a 90px header for half a second on every
     load ("something is loading an old header bar each time", 2026-09-28). */
  /* The menu button is its three bars and nothing else: no pill, no border,
     no glow ("take out grips box border beside HQ", 2026-09-28). Its focus
     ring stays for the keyboard. */
  /* By id: atlas-panel-theme.css boxes it with the same weight and loads later. */
  body .topbar #mobileMenu.mobile-menu-btn,body .topbar #mobileMenu.mobile-menu-btn:hover,body .topbar #mobileMenu.mobile-menu-btn:active,body .topbar #mobileMenu.mobile-menu-btn[aria-expanded="true"]{
    border-color:transparent!important; background:transparent!important; box-shadow:none!important; transform:none!important;
  }
  body #atlasPhoneHead{
    grid-column:2!important; grid-row:1!important;
    min-width:0; display:flex; flex-direction:column; justify-content:center;
  }
  body #atlasPhoneDate{
    margin:1px 0 0; font-size:10.5px; font-weight:700; letter-spacing:.02em;
    color:var(--ink-on-dark-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  body #atlasPhoneTools{
    grid-column:3!important; grid-row:1!important;
    display:flex; align-items:center; gap:8px;
  }
  /* The search pill, collapsed. It keeps its own id and its own module; this
     only changes the box it is drawn in. */
  body:not([data-atlas-phone-search="open"]) .atlas-mobile-global-search{
    grid-column:3!important; grid-row:1!important;
    width:82px!important; min-width:82px!important; max-width:82px!important;
    padding:0 3px!important; border-radius:999px!important;
    justify-content:space-between!important; gap:2px!important; overflow:hidden!important;
  }
  /* Folded, the pill holds TWO controls and nothing else -- the field, its
     spilling placeholder and the ghost behind it all belong to the expanded
     pill.
     The Atlas mark stays because it is the mark: the phone wears the same
     living core the desktop does, which
     browser-checks/the-mark-has-a-living-core.check.js measures here. It is
     also the Assistant's button -- the only one in Atlas -- so it cannot be
     borrowed to open the search: one 34px control cannot mean both things,
     and folding the search onto it left the Assistant unreachable at this
     width ("separate them", 2026-09-14). The magnifier beside it is the
     search's own, built in atlas-phone-shell.js. */
  body:not([data-atlas-phone-search="open"]) .atlas-mobile-global-search>.atlas-search-wrap,
  body:not([data-atlas-phone-search="open"]) .atlas-mobile-global-search>.atlas-search-ghost,
  body:not([data-atlas-phone-search="open"]) .atlas-mobile-global-search>input{
    display:none!important;
  }
  body:not([data-atlas-phone-search="open"]) .atlas-mobile-global-search:not(.assistant-open)>.atlas-search-glyph{
    display:grid!important; margin:0!important; flex:0 0 auto!important;
  }
  /* The search's own disc. Only while folded: once the pill is open the field
     is the way in and a magnifier beside it is noise. */
  body .atlas-mobile-global-search>#atlasPhoneSearchOpen{display:none}
  body:not([data-atlas-phone-search="open"]) .atlas-mobile-global-search>#atlasPhoneSearchOpen{
    display:grid!important; place-items:center; flex:0 0 auto!important;
    width:34px; height:34px; min-height:0; padding:0;
    border:0; background:transparent; color:var(--ink-on-dark,#eef8ff); cursor:pointer;
  }
  body:not([data-atlas-phone-search="open"]) .atlas-mobile-global-search>#atlasPhoneSearchOpen:focus-visible{
    outline:2px solid var(--blue-deep); outline-offset:2px; border-radius:999px;
  }
  /* Expanded: over the bar, the whole width, so the field is as big as it was
     before the title took the row. */
  body:not([data-atlas-phone-search="open"]) #atlasPhoneTools{display:none!important}
  body[data-atlas-phone-search="open"] #atlasPhoneHead{display:none!important}
  body[data-atlas-phone-search="open"] .atlas-mobile-global-search{
    grid-column:2/4!important; grid-row:1!important;
    width:100%!important; min-width:0!important; max-width:none!important;
  }
  body[data-atlas-phone-search="open"] #atlasPhoneTools{
    display:grid!important; grid-column:4!important; grid-row:1!important;
  }
  body #atlasPhoneSearchClose{width:42px;height:42px;border-radius:999px;font-size:22px;line-height:1}
  /* The morph (assets/atlas-phone-bar.js morphTo): while it runs the pill
     spans the title's column too, anchored right, at the width the script
     steps, and the title is out of sight so none of it shows through the
     glass. After the rules above so these win at the same weight. */
  body[data-atlas-phone-morph] .atlas-mobile-global-search{
    grid-column:2/4!important; justify-self:end!important;
    width:var(--atlas-morph-w,100%)!important; min-width:0!important; max-width:none!important;
  }
  body[data-atlas-phone-morph] #atlasPhoneHead{visibility:hidden!important}
  /* Nothing on a phone is wider than the phone ("any other windows that use
     sideways scroll", 2026-09-26). Measured on every page at all three text
     sizes (browser-checks/no-page-scrolls-sideways-on-a-phone.check.js); each
     rule is the one thing that page could not shrink. The Calendar's week and
     the Dispatch board have their own phone layouts in their modules. */
  body .atlas-revenue-shell{grid-template-columns:minmax(0,1fr)!important}
  body .atlas-revenue-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body .atlas-revenue-metric,body .atlas-revenue-filters>label{min-width:0}
  body .atlas-revenue-metric b{overflow-wrap:anywhere}
  body .atlas-revenue-table{overflow:visible}
  body .atlas-revenue-row.head{display:none}
  body .atlas-revenue-row{grid-template-columns:minmax(0,1fr) auto!important;row-gap:2px}
  body .atlas-revenue-row>*{min-width:0;overflow-wrap:anywhere}
  body .atlas-revenue-row>:first-child{grid-column:1/-1;color:var(--ink-faint)}
  body .inventory-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important}
  body .inventory-row>:first-child{grid-column:1/-1}
  body .inventory-row>*{min-width:0;overflow-wrap:anywhere}
  body .payroll-tabs{flex-wrap:wrap}
  body #page-settings .settings-b-nav{flex-wrap:wrap!important;overflow-x:visible!important}
  body .pricebook-table{table-layout:fixed;width:100%}
  body .pricebook-table :is(th,td){white-space:normal;overflow-wrap:anywhere}
  /* The bell, and only the bell. The four Quick Actions stay off the phone
     bar ("the four icons crowd the phone bar"); the bell is not one of them
     and the phone app has carried one since 2026-09-13. */
  body .topbar .topbar-quick{display:contents!important}
  body .topbar .topbar-quick .topbar-quick-stack{display:none!important}
  body .topbar .topbar-quick .notify-control{
    grid-column:4!important; grid-row:1!important; display:block!important; position:relative;
  }
  /* The clock (mockup B, 2026-10-01, "and this"). Nothing on the bar, so the
     title keeps its whole column: while on the clock the menu button wears a
     green ring with a dot -- the same ring the desktop's avatar wears -- and
     the clock card leads the side menu. Both drawn by atlas-payroll.js, and
     only for somebody with a membership to punch. After the rule above that
     takes the button's shadow away, so this one wins at the same weight. */
  body .topbar #mobileMenu.mobile-menu-btn{position:relative}
  body .topbar #mobileMenu.mobile-menu-btn[data-on-clock="true"]{
    border-radius:999px!important;
    box-shadow:0 0 0 2px var(--green),0 0 10px color-mix(in srgb,var(--green) 45%,transparent)!important;
  }
  body .topbar #mobileMenu.mobile-menu-btn[data-on-clock="true"]::after{
    content:""; position:absolute; right:0; top:0; width:10px; height:10px; box-sizing:border-box;
    border-radius:50%; background:var(--green); border:2px solid var(--chrome-navy);
  }
  /* One row of discs (option C, 2026-10-03; no words beside them since
     2026-10-13): the clock, whose menu holds Clock in or out and Add My Time
     (2026-10-17), the log, Field view for an owner, and Reload on the right.
     The card's green says on the clock. */
  body #mobileNavigation #atlasDrawerClock{
    flex:0 0 auto; display:flex; align-items:center; gap:10px; margin:4px 2px 10px; padding:8px 14px;
    border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.05);
    color:var(--ink-on-dark-soft);
  }
  body #mobileNavigation #atlasDrawerClock[data-on-clock="true"]{border-color:color-mix(in srgb,var(--green) 45%,transparent);background:color-mix(in srgb,var(--green) 10%,transparent)}
  body #mobileNavigation #atlasDrawerClock .dc-discs{flex:1 1 auto; display:flex; justify-content:space-between; gap:6px}
  body #mobileNavigation #atlasDrawerClock .dc-discs .btn-disc{position:relative; width:40px; height:40px; min-height:40px; padding:0}
  body #mobileNavigation #atlasDrawerClock .dc-discs .btn-disc.dc-tip::after{
    content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
    padding:4px 8px; border-radius:8px; background:var(--chrome-navy); color:var(--ink-on-dark); font-size:11.5px; font-weight:700; white-space:nowrap;
    border:1px solid rgba(255,255,255,.2); pointer-events:none; z-index:2;
  }
  body[data-atlas-phone-search="open"] .topbar .topbar-quick .notify-control{display:none!important}
  body .topbar .topbar-quick .notify-control #notifyBell{width:42px!important;height:42px!important;border-radius:999px!important}
  /* The quick bar's hover tooltip is drawn as a ::after on every button in the
     group and centred under it. On a phone there is no hover, and under a
     button 52px from the right edge it laid out past the edge and pushed the
     whole page sideways by 13px -- an element a walk of the DOM cannot see,
     because it is a pseudo-element. */
  body .topbar .topbar-quick .notify-control #notifyBell::after{content:none!important}

  /* --- the band the title came off ------------------------------------- */
  /* Only the text block. A band whose second child is a control keeps it and
     loses the panel; a band that was nothing but the text goes entirely. */
  /* The text, wherever a band keeps it: most wrap it in a div beside their
     controls, the dashboard's own heading puts the h1 and the description
     straight in the band. Hiding the text rather than the band is what keeps
     the controls -- the Equipment page keeps New Equipment in its .ane-head,
     and the source chips live in others. A band
     left holding nothing collapses to nothing, because the padding and the
     panel come off below. */
  body .page :is(.section-heading,.locations-heading,.restore-heading,.aid-head,.ane-head,.atlas-mobile-dashboard-title)>div:first-child,
  body .page :is(.section-heading,.locations-heading,.restore-heading,.aid-head,.ane-head,.atlas-mobile-dashboard-title)>h1,
  body .page :is(.section-heading,.locations-heading,.restore-heading,.aid-head,.ane-head,.atlas-mobile-dashboard-title)>p,
  body .page :is(.section-heading,.locations-heading,.restore-heading,.aid-head,.ane-head,.atlas-mobile-dashboard-title)>.eyebrow{
    display:none!important;
  }
  body .page :is(.section-heading,.locations-heading,.restore-heading,.aid-head,.ane-head,.atlas-mobile-dashboard-title){
    /* Only `background` needs the weight: the panel theme paints the band with
       !important and everything else it sets on this element is ordinary. Two
       !important declarations of the same property in different files are
       settled by which file loaded last, which is a race
       (browser-checks/stylesheet-conflicts.check.js), so these carry none. */
    margin:0 0 10px; padding:0;
    border:0; border-radius:0;
    background:none!important; box-shadow:none;
  }
  /* The dashboard's own heading is the one the panel theme addresses by id
     (#page-dashboard .atlas-mobile-dashboard-title), which outranks a class
     list however long. Matched here at the same rank plus one, or HQ keeps an
     empty panel where its title used to be. */
  body #page-dashboard .atlas-mobile-dashboard-title{
    margin:0; padding:0; border:0; border-radius:0;
    background:none!important; box-shadow:none;
  }

  /* --- the bottom edge ------------------------------------------------- */
  /* The page runs to the bottom of the glass: there is no bar down there
     (the tab bar went on 2026-10-01, "redundant to the side panel"). On an
     iPhone the page is drawn under the home bar (viewport-fit=cover), so the
     last card clears the home bar's inset on top of the page's own 28px and
     no more -- a band reserved for something that is not there is dead
     screen. */
  body .content{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
}
/* Past the breakpoint the shell is not there at all: the pages take their own
   headings back and the desktop header carries #pageTitle alone; the date
   under it is the phone's. */
@media (min-width:781px){body #atlasPhoneDate,body #atlasPhoneTools,body #atlasPhoneSearchOpen,body #atlasDrawerClock{display:none!important}}