/* The app shell (D2 Task 18): the frame of every signed-in screen. The side column is the approved boards' aside.side (Desk.dc.html for
   the rules card and the 39px items, 32px buttons; 44px in the narrow rail for touch), its values replaced by the tokens of tokens.css, in
   the deep grey Yanky approved on 06/11 (docs/mockups/2026-11-06-desk-color.html, the --side-* tokens); the main screen stays light.
   At 1280px and wider the Desk is three columns, 232px 392px 1fr: this sheet's 232px nav, then the main region the Deals screen splits
   in two. Narrower, the nav folds to its icons (Q12) and every screen has the main region to itself. The width here is the one
   layout.js reads (WIDE_QUERY), so the screen mounted always matches what is drawn. Everything is light for now (06/11): only the
   attribute data-theme is set. */

/* The page itself never scrolls, only the columns do. Every column is a positioned box, so the visually hidden text in a long list stays inside its own
   column: without it, each hidden label is placed against the page and stretches the page far below the frame (08/11, on 29 deals). */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font-body); }

/* ---- The side column: deep grey ---------------------------------------------------------------------------------------------------- */
.side { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 18px 12px 0; overflow-y: auto; background: var(--side-bg); color: var(--side-ink); border-right: 1px solid var(--hair); }
/* The brand's ring is too dark on the grey: the menu has its own. */
.side :focus-visible { outline-color: var(--side-focus); }

.brandRow { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 10px 18px; }
.logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border: 1.5px dashed var(--side-ink-3); border-radius: 9px; background: var(--side-card); color: var(--side-ink-3); }
.logoImg { border: 0; object-fit: contain; }
.logoSlot { display: inline-flex; flex: none; }
.brandName { overflow: hidden; color: var(--side-on-ink); font: 600 var(--fs-md) var(--font-head); letter-spacing: .01em; white-space: nowrap; text-overflow: ellipsis; }

.navList { display: flex; flex-direction: column; gap: 4px; }
.side .nav { min-height: 0; padding: 9px 12px; color: var(--side-ink); }   /* Desk.dc.html: 39px */
/* The Guide: a quiet link of its own above the person (approved 08/11). Before .navOn, so the current page still reads as current. */
.side .navGuide { gap: 8px; padding: 4px 12px; border-radius: var(--r-sm); color: var(--side-ink-3); font-size: var(--fs-sm); }
.navGuide .navIcon { width: 14px; height: 14px; }
.side .nav:hover { background: var(--side-card); color: var(--side-on-ink); }
.side .navOn, .side .navOn:hover { background: var(--side-on-bg); color: var(--side-on-ink); box-shadow: none; }
.navIcon { display: inline-flex; flex: none; width: 18px; height: 18px; color: currentColor; }   /* the colour mockup: the item's own */
.navLabel { flex: 1; min-width: 0; }
.navCount { padding: 0 8px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.navCount.ready { background: var(--status-ready-bg); color: var(--status-ready-ink); }
.navCount.new { background: var(--status-new-bg); color: var(--status-new-ink); }

/* "YOUR RULES" (Desk.dc.html), the inner card of the grey */
.rulesCard { display: flex; flex-direction: column; gap: 8px; margin: 18px 4px 0; padding: 14px; border-radius: var(--r-xl); background: var(--side-card); }
.rulesHead { color: var(--side-ink); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; }
.rulesNotice { align-self: flex-start; white-space: normal; }
.ruleLine { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ruleDot { flex: none; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--status-ready-mid); }
.rulesLink { color: var(--side-link); font-size: 13px; font-weight: 500; text-decoration: none; }
.rulesLink:hover { color: var(--side-on-ink); }

.sideFill { flex: 1; min-height: 24px; }

/* The Guide, the person and the credit stay at the bottom of the column: a long rules card scrolls behind them instead of pushing them off the screen. */
.sideFoot { position: sticky; bottom: 0; display: flex; flex: none; flex-direction: column; gap: 4px; padding-bottom: 18px; background: var(--side-bg); }

/* The person, the sound switch and the way out (Desk.dc.html: padding 10px, gap 6px, 32px buttons; 44px in the narrow rail) */
.person { display: flex; align-items: center; gap: 6px; padding: 10px; }   /* Desk.dc.html */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-right: 4px; border-radius: var(--r-pill); background: var(--side-card); color: var(--side-on-ink); font: 600 13px var(--font-head); }
.personText { flex: 1; min-width: 0; }
.personName { overflow: hidden; color: var(--side-on-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.personRole { color: var(--side-ink-3); font-size: var(--fs-sm); }
.side .iconbtn { width: 32px; min-height: 32px; border-radius: 9px; color: var(--side-ink-3); }
.side .iconbtn:hover { background: var(--side-card); color: var(--side-on-ink); }

/* Who built it (approved 08/11): small and grey, under the person. It wraps rather than scrolling the column sideways. */
.credit { padding-top: 8px; border-top: 1px solid var(--side-card); color: var(--side-ink-3); font-size: 10.5px; line-height: 1.45; }
.creditMail { color: inherit; text-decoration: none; }
.creditMail:hover { color: var(--side-on-ink); }
.creditMotto { color: var(--side-ink-2); font-weight: 500; }

/* ---- The main region -------------------------------------------------------------------------------------------------------------- */
.shellMain { position: relative; min-width: 0; min-height: 0; overflow-y: auto; }
.shellMain:focus { outline: none; }

/* The Desk at 1280px and wider: the list and the deal side by side, each scrolling on its own (Desk.dc.html .list and .pane). */
.deskList { position: relative; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--bg-list); border-right: 1px solid var(--hair); }
.deskPane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }

@media (min-width: 1280px) {
  .app[data-screen="deals"] .shellMain, .app[data-screen="deal"] .shellMain { display: grid; grid-template-columns: 392px minmax(0, 1fr); overflow: hidden; }
}

/* ---- Narrower than 1280px: the nav folds to its icons ------------------------------------------------------------------------------ */
@media (max-width: 1279.98px) {
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .side { align-items: stretch; padding: 18px 12px 0; }
  .brandRow { justify-content: center; padding: 4px 0 18px; }
  .side .nav { position: relative; justify-content: center; min-height: 44px; padding: 0; }
  .side .iconbtn { width: 44px; min-height: 44px; border-radius: var(--r-md); }
  .side .nav:hover { transform: none; }
  .navLabel, .brandName, .personText { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .navCount { position: absolute; top: 3px; right: 1px; min-width: 18px; padding: 0 5px; font-size: 10.5px; line-height: 16px; text-align: center; }
  .rulesSlot, .credit { display: none; }
  .navGuide .navIcon { width: 18px; height: 18px; }
  .person { flex-direction: column; gap: 4px; padding: 6px 0; }
  .avatar { margin-right: 0; }
}

/* ---- The boot that could not load ------------------------------------------------------------------------------------------------ */

.bootFailed { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; background: linear-gradient(180deg, var(--bg-page-from), var(--bg-page-to)); }
.bootCard { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: min(420px, 100%); padding: 28px; }
.bootLine { color: var(--ink-2); }