/*
  59-desktop-shell.css — v45.9 the desktop rail and sidebar
  (design/shell/Desktop, design/icons/Desktop).

  Under 900px nothing here shows. From 900px the rail (72px) and sidebar
  (248px) are fixed at the left, the page header (#deskHead) is the sticky
  header, and the phone's campaign bar, group strip and bottom bar hide.
  The rail sits at z 120: under the bar's sheets (140–150), app dialogs
  (260) and the chart viewer (200, which covers everything).
*/

.desk-nav, .desk-head { display: none; }

@media (min-width: 900px) {
  .desk-nav {
    position: fixed; z-index: 120; top: 0; bottom: 0; left: 0; width: 320px;
    display: flex; background: #1f1712; color: #f1e4c4;
  }
  body .app { margin-left: 320px !important; margin-right: 0 !important; width: auto !important; max-width: none !important; padding: 0 24px 32px !important; }
  body .topbar.campaign-bar, body .group-strip, body .bottom-nav { display: none !important; }
  /* The Codex's type rail repeats the sidebar's channels. */
  #screen-codex #codexCategoryRail { display: none; }

  /* ---------- rail ---------- */
  .dk-rail { width: 72px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; background: #17110d; border-right: 1px solid #2a1e15; overflow-y: auto; scrollbar-width: none; }
  .dk-badge { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; border: 0; background: #c18a2a; color: #1f1712; font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; }
  .dk-rule { flex-shrink: 0; width: 32px; height: 2px; margin: 2px 0; border-radius: 2px; background: #3a2a1d; }
  .dk-tiles { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .dk-spacer { flex: 1 1 auto; }
  .dk-tile { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
  .dk-face { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 24px; background: #2a1e15; color: #bfae8c; transition: border-radius .15s ease, background .15s ease; }
  .dk-tile:hover .dk-face { border-radius: 16px; color: #e8c069; }
  .dk-tile.is-on .dk-face { border-radius: 14px; background: #c18a2a; color: #1f1712; }
  .dk-pill { position: absolute; left: -12px; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: transparent; transition: top .15s ease, bottom .15s ease; }
  .dk-tile.is-on .dk-pill { top: 8px; bottom: 8px; background: #e8c069; }
  .dk-dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 999px; background: #e27b5a; border: 2px solid #17110d; }
  .dk-tile:focus-visible .dk-face, .dk-badge:focus-visible { outline: 2px solid #e8c069; outline-offset: 2px; }

  /* ---------- sidebar ---------- */
  .dk-side { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #2a1e15; }
  .dk-camp { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; background: none; border: 0; border-bottom: 1px solid #3a2a1d; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .dk-camp-name { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: 17px; font-weight: 700; color: #e8c069; }
  .dk-camp-name svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .dk-camp-who { font-size: 13px; color: #bfae8c; }
  .dk-day { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #3a2a1d; }
  .dk-daybtn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; border-radius: 14px; border: 1px solid #6e5b40; background: #2a1e15; color: #f1e4c4; font: inherit; text-align: left; cursor: pointer; }
  .dk-daybtn > .cx-icon { flex-shrink: 0; color: #e8c069; }
  .dk-day-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .dk-day-n { font-size: 14px; font-weight: 700; }
  .dk-day-date { font-size: 12px; color: #bfae8c; }
  .dk-anchor { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 1px solid #4a3a28; background: #2a1e15; color: #bfae8c; cursor: pointer; }
  .dk-anchor[aria-pressed="true"] { background: #c18a2a; border-color: #c18a2a; color: #1f1712; }
  .dk-sync { flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
  .dk-sync-dot { width: 10px; height: 10px; border-radius: 999px; background: #9a8f7c; }
  .dk-sync[data-state="live"] .dk-sync-dot { background: #4fb06b; }
  .dk-sync[data-state="saving"] .dk-sync-dot { background: #e0a43a; }
  .dk-sync[data-state="remote"] .dk-sync-dot { background: #6aa8de; }
  .dk-sync[data-state="error"] .dk-sync-dot { background: #ec7a64; }
  .dk-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 8px; scrollbar-width: thin; }
  .dk-heading { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; font-weight: 700; color: #bfae8c; letter-spacing: .05em; text-transform: uppercase; }
  .dk-fold { width: 100%; margin-top: 8px; padding-top: 14px; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
  .dk-chev { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
  .dk-chev.is-open { transform: rotate(90deg); }
  .dk-channels, .dk-pins { display: flex; flex-direction: column; gap: 2px; }
  .dk-channel { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: 10px; background: transparent; color: #d9c9a6; font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
  .dk-channel > .cx-icon { flex-shrink: 0; color: #bfae8c; }
  .dk-channel-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dk-count { font-size: 13px; font-variant-numeric: tabular-nums; color: #a8977a; }
  .dk-channel:hover { background: #2a1e15; }
  .dk-channel.is-on { background: #e8c069; color: #1f1712; font-weight: 700; }
  .dk-channel.is-on > .cx-icon, .dk-channel.is-on .dk-count { color: #1f1712; }
  .dk-pin { padding-left: 34px; font-size: 14px; }
  .dk-empty { padding: 6px 12px 6px 34px; font-size: 13px; color: #a8977a; }
  .dk-channel:focus-visible, .dk-camp:focus-visible, .dk-daybtn:focus-visible, .dk-anchor:focus-visible, .dk-sync:focus-visible, .dk-fold:focus-visible { outline: 2px solid #e8c069; outline-offset: 2px; }

  /* ---------- the page header ---------- */
  .desk-head {
    position: sticky; top: 0; z-index: 110;
    display: flex; align-items: center; gap: 12px; height: 64px; margin: 0 -24px 16px; padding: 0 24px;
    background: #2a1e15; border-bottom: 1px solid #3a2a1d; color: #f1e4c4;
  }
  .desk-head > .cx-icon { flex-shrink: 0; color: #e8c069; }
  #deskHead .dk-title { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 700; color: #f1e4c4; letter-spacing: 0; text-shadow: none; font-family: inherit; }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .dk-face, .dk-pill, .dk-chev { transition: none; }
}
/* styles.css (@layer legacy) sizes every h1 with !important from 700px; only
   the earlier editor-pilot layer gets past a layered !important (CLAUDE.md). */
@layer editor-pilot {
  @media (min-width: 900px) { #deskHead .dk-title { font-size: 20px !important; } }
}