/* ── THE SHELL ──
   A rail of five labelled places on the left (src/core/nav.js), the top bar
   and the page beside it. Under 1100px the rail narrows to icons with their
   words underneath; under 700px it becomes a bar at the bottom, within thumb
   reach, and the top bar keeps only the logo, search, account and sync. */
#app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
#app-main { display: flex; flex-direction: column; min-width: 0; }

#app-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--surface); border-right: 1px solid var(--line); z-index: 101; overflow-y: auto; }
.rail-brand { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; }
.rail-brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.rail-brand-text #header-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: normal; }
.rail-items { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rail-spacer { flex: 1; }
.rail-foot { padding-top: 8px; border-top: 1px solid var(--line); }
#app-rail #sync-status { height: auto; min-height: 36px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); line-height: 1.3; }
#app-rail #sync-status:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: none; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1); }
.nav-item .ico { width: 20px; height: 20px; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-count { margin-left: auto; min-width: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--rose); color: var(--rose-ink); font-size: 12px; font-weight: 600; text-align: center; line-height: 20px; }

.rail-foot { display: flex; flex-direction: column; gap: 4px; }
.rail-toggle { color: var(--muted); font-size: 13px; }

#app-bottom { display: none; }
.sync-mini { display: none; }

/* Tablets and small laptops: the rail keeps its words, under the icons. */
@media (max-width: 1099px) {
  #app { grid-template-columns: 88px minmax(0, 1fr); }
  #app-rail { padding: 12px 8px; }
  .rail-brand { justify-content: center; padding: 4px 0 12px; }
  .rail-brand-text { display: none; }
  #app-rail .nav-item { flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 4px; font-size: 12px; text-align: center; }
  #app-rail .nav-count { position: absolute; top: 4px; left: calc(50% + 4px); margin: 0; }
  #app-rail #sync-status { justify-content: center; padding: 8px 4px; }
  #app-rail #sync-label { display: none; }
  #app-rail #sync-status[data-pending]:not([data-pending=""])::after { content: attr(data-pending); font-weight: 600; font-variant-numeric: tabular-nums; }
}

/* Icons only, by choice (CMS._toggleRail): a slim rail on any window wider than a phone. */
@media (min-width: 701px) {
  :root[data-rail-icons] #app { grid-template-columns: 72px minmax(0, 1fr); }
  :root[data-rail-icons] #app-rail { padding: 12px 10px; }
  :root[data-rail-icons] .rail-brand { justify-content: center; padding: 4px 0 12px; }
  :root[data-rail-icons] .rail-brand-text { display: none; }
  :root[data-rail-icons] #app-rail .nav-item { flex-direction: row; justify-content: center; gap: 0; min-height: 44px; padding: 0; }
  :root[data-rail-icons] #app-rail .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :root[data-rail-icons] #app-rail .nav-count { position: absolute; top: 2px; right: 2px; left: auto; margin: 0; min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }
  :root[data-rail-icons] #app-rail #sync-status { justify-content: center; padding: 8px 4px; }
  :root[data-rail-icons] #app-rail #sync-label { display: none; }
  :root[data-rail-icons] #app-rail #sync-status[data-pending]:not([data-pending=""])::after { content: attr(data-pending); font-weight: 600; font-variant-numeric: tabular-nums; }
}

/* Phones: the five places move to the bottom. */
@media (max-width: 700px) {
  #app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  #app-rail { display: none; }
  #app-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 101; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  #app-bottom .nav-item { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 4px 0; font-size: 11px; text-align: center; }
  #app-bottom .nav-count { position: absolute; top: 4px; left: calc(50% + 4px); margin: 0; }
  .sync-mini { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; cursor: pointer; }
  .sync-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sync-mini-n:empty { display: none; }
}
#header .phone-brand { display: none; }
@media (max-width: 700px) { #header .phone-brand { display: flex; } }

@media print { #app { display: block; padding: 0; } #app-rail, #app-bottom { display: none !important; } }

/* CMS Interactive inside the app (src/pages/interactive.js): its view (Windows)
   or frame (the web) fills the page area under the top bar. The app's toasts
   show in the top bar there, since the view draws over the page. */
body.ix-on #app-main { height: 100vh; overflow: hidden; }
body.ix-on #main-content { display: flex; min-height: 0; padding: 0; }
.ix-host { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: var(--paper); }
.ix-wait { margin: 24px; color: var(--muted); }
.ix-still { display: block; width: 100%; height: 100%; }
#ix-frame { position: fixed; z-index: 50; border: 0; background: var(--paper); }
#ix-frame[hidden] { display: none; }
body.ix-on #toast-container { top: 8px; }
@media (max-width: 700px) { body.ix-on #app-main { height: calc(100vh - 68px - env(safe-area-inset-bottom, 0px)); } }
/* The page doesn't slide in: the view is placed where the page area is. */
body.ix-on #main-content.page-enter, body.ix-on #main-content.page-enter-back { animation: none; }