/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP — the whole desktop-only layer, in one file.

   Everything here lives behind `min-width: 1180px`. A phone never matches it,
   so this file cannot change the mobile shell: that is the entire reason it is
   a separate stylesheet rather than more rules at the bottom of dashboard.css.
   It also means the desktop design can be reverted in one move — delete the
   <link> in dashboard_b.html and the app is exactly what it was.

   WHY 1180 AND NOT THE EXISTING 980
   dashboard.css, social-feedchats.css and social-schedule.css all carry a
   `min-width: 980px` block. Those stay. 980 is the "not a phone" breakpoint —
   it swaps the tab bar for the top nav and lifts .wrap from 660 to 1040, which
   is the right treatment for a small laptop, a split-screen window, or an iPad
   in portrait. 1180 is the "this is a desk" breakpoint, where there is room for
   a persistent nav rail beside the content rather than above it.

   So there are three layouts, not two, and the 980–1179 band is untouched by
   this file. Anything here that needs to beat a 980 rule does so by loading
   later, not by !important — this sheet is linked last in dashboard_b.html and
   the selectors below match the specificity of the rules they replace.

   iPad landscape (1180 logical px) DOES match this, deliberately (Cole,
   2026-08-13): a keyboard-case iPad is a desk. That is the one place a native
   shell meets these rules, which is why nothing in this file depends on hover
   or a mouse to be usable — hover only ever ADDS an affordance that is also
   reachable another way.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1180px) {

  /* Declared inside the query, not on the bare :root, so the token simply does
     not exist below 1180px — anything that reads it outside this layer is a
     mistake that shows up immediately rather than resolving to a phantom width. */
  :root { --rail-w: 236px; }

  /* ── Canvas ──────────────────────────────────────────────────────────────
     The 980 block caps .wrap at 1040px. On a 1440px window that leaves ~200px
     of dead ground on each side; at 1920 it is ~440px. Lifting the cap gives
     the width to the surfaces that can use it — Team, Schedule, Checklists,
     Platform are all lists and tables that were being squeezed for no reason.

     The Feed is the exception and goes the OTHER way. Running text at 1040px
     is roughly 140 characters a line, which is well past comfortable; the feed
     column narrows so a post reads at a sane measure and sits centered in the
     canvas. `.wrap.feed-wrap` is toggled by app.js:364 on the feed tab only,
     so this is the one selector that has to stay in agreement with that call.
     Note it is an OVERRIDE of dashboard.css:1142, not a replacement — that
     rule still owns the 980–1179 band and must keep its 1040px there. */
  .wrap { max-width: 1280px; padding: 24px 28px 48px; }
  .wrap.feed-wrap { max-width: 720px; }
  /* Schedule's week grid gets the whole window. 1280 is a reading ceiling and
     this is a table — capping it there still cost ~53px of Sunday at 1920.
     app.js toggles the class alongside feed-wrap. */
  .wrap.wide-wrap { max-width: none; }

  /* Chat threads keep their own measure everywhere EXCEPT the two-pane layout
     below, which supplies its own columns and must not be centred inside a
     660px box (social-feedchats.css:458) that is narrower than one of them. */
  main.chat-mode .wrap { max-width: 720px; }
  main.chat-mode .wrap:has(.chatdesk) { max-width: none; margin: 0; }

  /* ── Nav rail ────────────────────────────────────────────────────────────
     Replaces the top nav at this width. nav.tabbar and .fab are already hidden
     by the 980 block — a min-width:980 query matches at 1180 too — so the only
     thing to turn off here is .topnav, which that block turns on.

     Fixed rather than a grid column, so #app keeps the plain flex column it is
     given inline in dashboard_b.html and nothing has to fight an inline style
     with !important. #app pays for the space with padding, which the banners,
     the header and main all inherit by sitting inside it. */
  .topnav { display: none; }
  #app { padding-left: var(--rail-w); }

  .railnav {
    display: flex; flex-direction: column; gap: 1px;
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 20;
    background: var(--surface); border-right: 1px solid var(--border);
    /* Scrolls itself. An org with every surface bought, on a 720px-tall laptop,
       must not lose the bottom of its own navigation. */
    overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .railnav button {
    display: flex; align-items: center; gap: 11px; width: 100%; position: relative;
    background: none; border: none; font: inherit; text-align: left; cursor: pointer;
    padding: 9px 11px; border-radius: 10px;
    font-size: 13.5px; font-weight: 700; color: var(--ink);
  }
  .railnav button svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
  .railnav button:hover { background: var(--surface-2); }
  .railnav button.active { background: var(--accent); color: var(--accent-ink); }
  .railnav button.active svg { color: var(--accent-ink); }
  .railnav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .rail-group {
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); padding: 15px 11px 5px;
  }
  /* The bar pins its badge over a stacked icon; a rail row is a line of text,
     so the count belongs at the end of the line. Resetting all four offsets is
     deliberate — dashboard.css positions .dot-badge absolutely by default. */
  .railnav .dot-badge {
    position: static; margin-left: auto; border: none; flex: none;
  }
  .railnav button.active .dot-badge { background: var(--accent-ink); color: var(--accent); }

  /* ── Density ─────────────────────────────────────────────────────────────
     The whole app is sized for a thumb: 22px corner radius, 15px card padding,
     42px avatars, 73px roster rows. None of that is wrong — it is what a phone
     needs — and none of it is what a mouse needs. A team list that showed four
     people in the space a laptop had for eleven was not showing restraint, it
     was showing phone metrics on a pointer that can hit a 20px target.

     Retuned through the TOKENS wherever possible, so cards, sheets, inputs and
     buttons all move together and none of them drifts apart from the others
     later. dashboard.css:1054 declares these on `:root, #startup`; redeclaring
     on :root here leaves #startup's own copy winning inside the splash, which
     is correct — that screen is full-bleed and has no density problem. */
  :root { --radius: 14px; --radius-sm: 10px; }

  /* DELIBERATELY NOT the input font size. dashboard.css:163-168 floors every
     focusable control at 16px because iOS auto-zooms into anything smaller and
     can leave the page stuck zoomed with the tab bar clipped. An iPad in
     landscape matches THIS breakpoint, and html.native-ios only re-asserts the
     floor inside the native shell — an iPad in Safari has no such class. So
     inputs keep 16px on desktop, on purpose, and always will. */

  .card { padding: 13px 15px; margin: 10px 0; }
  /* dashboard.css declares .empty twice — 185 (34px) and 1103 (42px, and the
     later one wins). Both are sized so an empty card still fills a phone screen
     enough to read as a state rather than a glitch. On a monitor the card is
     one of six on screen at once and does not need to carry that weight. */
  .empty { padding: 16px 12px; font-size: 14px; }

  /* Page-level actions stop spanning the canvas. `.tabpane > button.btn` is a
     deliberately narrow selector: button.btn is width:100% everywhere, and that
     is RIGHT inside a card, inside a modal, and on the login screen. It is only
     the pane-level action that reads as a mistake — "Invite by email" was
     1148px of coral across the top of Team. */
  .tabpane > button.btn { width: auto; min-width: 220px; }

  /* Roster rows. The negative margin lets the hover band reach the card's inner
     edge instead of stopping short of it, which reads as a misaligned box. */
  .person { padding: 7px 8px; margin: 0 -8px; gap: 10px; border-radius: 8px; }
  .person .avatar { width: 34px; height: 34px; font-size: 13px; }
  /* Hover only ever ADDS an affordance here — never the sole route to an
     action. iPad landscape matches this breakpoint and has no hover at all. */
  .person:hover { background: var(--surface-2); }

  /* ── Schedule ────────────────────────────────────────────────────────────
     With the columns finally able to shrink, the thing that still would not is
     the shift chip: `.tm` carries a time RANGE with white-space:nowrap, and a
     time range is not something to ellipsize — "9:30a–5:0…" is worse than no
     chip at all. So the chip is allowed to shrink and the range is set a step
     smaller here instead, which is the one dimension that can give. */
  .shift-chip { min-width: 0; }
  .shift-chip .tm { font-size: 11.5px; letter-spacing: -.01em; }
  .shift-chip .who { font-size: 10.5px; }
  .sc-av { width: 24px; height: 24px; font-size: 9.5px; }

  /* ── Chats, two panes ────────────────────────────────────────────────────
     The list on the left, the thread on the right, instead of the thread
     replacing the list. chat-desk.js owns the markup; everything below is
     layout only, and every selector is scoped to .chatdesk so nothing here can
     reach the single-pane layout that is still what a phone renders. */
  .chatdesk {
    /* 344 rather than 320: a channel row carries a name, a store badge and an
       unread count on one line, and the narrower column wrapped "2501 store
       chat" onto two. */
    display: grid; grid-template-columns: 344px minmax(0, 1fr);
    gap: 0; align-items: stretch; min-height: 0; height: 100%;
  }
  .chatdesk-list {
    min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    border-right: 1px solid var(--border); padding-right: 14px;
  }
  .chatdesk-thread { min-width: 0; min-height: 0; padding-left: 18px; display: flex; flex-direction: column; }

  /* The list is its own scroller now, so its cards should not also carry the
     page's outer rhythm — they are a column, not a stack of pages. */
  .chatdesk-list .card { margin: 0 0 10px; }
  .chatdesk-list .feed-head { margin-bottom: 8px; }
  /* The list IS the way back to the inbox on a desk, so the header's Back
     control has nothing left to do and would read as "leave Chats". */
  .chatdesk-list .feed-head .back { display: none; }

  /* chat-mode turns <main> into a fixed-height flex shell so the composer stays
     pinned. Those rules stop at #view; the thread now lives one level deeper,
     so the chain has to be extended to the column — exactly what
     social-feedchats.css:709-716 already does for the Feed's nested host. */
  main.chat-mode #view .chatdesk { flex: 1; min-height: 0; }
  main.chat-mode #view .chatdesk-thread .card.thread {
    flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  }
  main.chat-mode #view .chatdesk-thread .composer { position: static; margin: 0; }
  /* The thread's own header keeps its Back control on a phone. Here the list is
     always visible beside it, so Back is a control that undoes nothing. */
  main.chat-mode #view .chatdesk-thread .feed-head .back { display: none; }

  /* Nothing open yet. */
  .chatdesk-idle {
    margin: auto; text-align: center; max-width: 34ch; padding: 24px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
  }
  .chatdesk-idle-ic {
    width: 46px; height: 46px; border-radius: 50%; background: var(--surface-2);
    display: grid; place-items: center; color: var(--muted);
  }
  .chatdesk-idle-ic svg { width: 22px; height: 22px; }
  .chatdesk-idle-h { font-family: var(--font-round); font-weight: 800; font-size: 16px; }
  .chatdesk-idle-p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

}