/* ==========================================================================
   Cat Food Center: the shared shell, loaded by every page on the site.

   Written for the Learn section and adopted by the nine application pages in
   M14, which is why the layout below is described as a documentation shell:
   that is what it was, and the application pages moved into it rather than
   getting a second one.

   Layout is a three-column documentation shell:
     [ sidebar 264px ] [ article, max 760px ] [ on-this-page 240px ]
   under a fixed top bar. Below 1180px the right rail drops; below 900px the
   sidebar becomes a slide-in drawer behind a hamburger button.

   Every page loads cfc-tokens.css first, then this file. The Learn pages stop
   there; the application pages add cfc-app.css on top.
   ========================================================================== */

/* Tokens and the theme toggle live in cfc-tokens.css, which every page in the
   site loads ahead of this one. */

/* ── Base ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* One focus ring for the whole site, on :focus-visible so it appears for the
   keyboard and not for the mouse. The browser default would do at a pinch, but
   it is drawn against whatever the platform thinks the page is, and this site
   has two palettes; an accent ring with an offset stays visible on the surface,
   on the bg, and on a score tile. Nothing anywhere overrides it except the two
   components that need an inset ring because they clip. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Honour the system setting rather than deciding for the visitor. Smooth
   scrolling and every colour transition come off; nothing here conveys meaning
   through motion, so removing it costs nothing. Written as a blanket rule
   because a per-component list is a rule that goes stale the next time a
   transition is added. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Fraunces', Georgia, serif; }
a { color: var(--accent); }

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 8px 14px;
  border-radius: 8px; font-size: .875rem; text-decoration: none;
  transition: top 150ms;
}
.skip-link:focus { top: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   Top bar
   ══════════════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 100;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
}
.topbar-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Fraunces', Georgia, serif; font-size: 1.0625rem; font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: color 150ms;
}
.topbar-brand:hover { color: var(--accent); }
.topbar-brand svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.topbar-spacer { flex: 1; }

.topbar-search {
  display: flex; align-items: center; gap: 8px;
  width: 260px; max-width: 32vw; height: 34px; padding: 0 10px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--bg); color: var(--ink-soft);
  font-size: .8125rem; text-decoration: none; transition: border-color 150ms;
}
.topbar-search:hover { border-color: var(--accent); }
.topbar-search svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar-search .kbd {
  margin-left: auto; border: 1px solid var(--hairline); border-radius: 4px;
  padding: 0 5px; font-size: .6875rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--surface);
}
.topbar-cta {
  height: 34px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: .8125rem; font-weight: 500; text-decoration: none;
  transition: opacity 150ms; white-space: nowrap;
}
.topbar-cta:hover { opacity: .9; }

.nav-toggle {
  display: none; width: 34px; height: 34px; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--surface); color: var(--ink); cursor: pointer; padding: 0;
}
.nav-toggle svg { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   Shell
   ══════════════════════════════════════════════════════════════════════════ */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: 0 40px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Sidebar ── */
.sidebar {
  grid-column: 1;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 28px 12px 48px 0;
  border-right: 1px solid var(--hairline);
}
.sidebar-group { margin-bottom: 26px; }
.sidebar-group:last-child { margin-bottom: 0; }
.sidebar-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 0 12px; margin: 0 0 8px;
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar a {
  display: block; padding: 7px 12px; border-radius: 8px;
  font-size: .875rem; line-height: 1.4; color: var(--ink-soft);
  text-decoration: none; transition: background 120ms, color 120ms;
}
.sidebar a:hover { background: var(--surface); color: var(--ink); }
.sidebar a[aria-current="page"] {
  background: var(--accent-sub); color: var(--accent); font-weight: 600;
}
.sidebar-backdrop { display: none; }

/* ── Article column ── */
.article { grid-column: 2; min-width: 0; padding: 28px 0 64px; }

/* Breadcrumb */
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: .8125rem; color: var(--ink-soft); margin-bottom: 18px;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--hairline); }
.crumbs .current { color: var(--ink); }

.article h1 {
  font-family: 'Fraunces', Georgia, serif; font-size: 2rem; line-height: 1.15;
  font-weight: 600; color: var(--ink); margin: 0 0 14px; letter-spacing: -.01em;
}
.lede { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 32px; max-width: 62ch; }

/* Section headings carry an accent rule, matching the reference layout */
.article h2 {
  position: relative; font-family: 'Fraunces', Georgia, serif;
  font-size: 1.375rem; line-height: 1.3; font-weight: 600; color: var(--ink);
  margin: 48px 0 16px; padding-left: 14px;
}
.article h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 3px; border-radius: 2px; background: var(--accent);
}
.article h3 {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.0625rem;
  font-weight: 600; color: var(--ink); margin: 32px 0 10px;
}
.article h4 { font-size: .9375rem; font-weight: 600; color: var(--ink); margin: 22px 0 8px; }
.article p  { margin: 0 0 16px; max-width: 68ch; }
.article ul, .article ol { margin: 0 0 16px; padding-left: 22px; max-width: 68ch; }
.article li { margin-bottom: 7px; }
.article li > ul, .article li > ol { margin-top: 7px; }
.article strong { font-weight: 600; }
/* Prose links only. The application pages put whole components inside the
   article - a round scan button, result rows, cards - and each carries its
   own colour on a class selector, which a bare `.article a` would outrank.
   That is how the scan button came to be accent text on an accent circle.

   Underlined, always. WCAG 1.4.1 lets colour alone identify a link only where
   it reaches 3:1 against the surrounding text; accent on body copy is 1.53:1
   in light and 1.16:1 in dark, so it does not, and an underline that appears
   only on hover is no use to anyone reading rather than pointing. The offset
   and thinner rule keep it from crowding the descenders. */
.article a:not([class]) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article a:not([class]):hover { text-decoration-thickness: 2px; }
.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125em; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 4px; padding: 1px 5px;
}
.article hr { border: 0; border-top: 1px solid var(--hairline); margin: 40px 0; }

/* Anchors clear the fixed top bar */
h2[id], h3[id], section[id] { scroll-margin-top: calc(var(--topbar-h) + 20px); }

/* ── On this page ── */
.toc { grid-column: 3; position: sticky; top: var(--topbar-h); align-self: start; padding: 32px 0 48px; }
.toc-title {
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px;
}
.toc nav { border-left: 1px solid var(--hairline); max-height: calc(100vh - 140px); overflow-y: auto; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block; padding: 5px 0 5px 14px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: .8125rem; line-height: 1.45; color: var(--ink-soft); text-decoration: none;
  transition: color 120ms, border-color 120ms;
}
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }
.toc .lvl-3 a { padding-left: 26px; font-size: .78125rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Content components
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Callouts ── */
.callout {
  display: flex; gap: 12px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 16px 18px; margin: 22px 0; max-width: 68ch;
}
.callout-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.callout-body { min-width: 0; }
.callout-title { font-size: .875rem; font-weight: 600; margin: 0 0 6px; }
.callout p { font-size: .875rem; line-height: 1.65; margin: 0 0 8px; max-width: none; }
.callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; }
.callout ul, .callout ol { font-size: .875rem; margin: 0 0 8px; padding-left: 20px; max-width: none; }
.callout li { margin-bottom: 4px; }

.callout-note    { border-left-color: var(--accent); }
.callout-note    .callout-icon, .callout-note    .callout-title { color: var(--accent); }
.callout-tip     { border-left-color: var(--excellent); }
.callout-tip     .callout-icon, .callout-tip     .callout-title { color: var(--excellent-ink); }
.callout-warning { border-left-color: var(--poor); }
.callout-warning .callout-icon, .callout-warning .callout-title { color: var(--warning-ink); }
.callout-danger  { border-left-color: var(--bad); }
.callout-danger  .callout-icon, .callout-danger  .callout-title { color: var(--bad-ink); }

/* ── Panel (formula / worked example / quoted block) ── */
.panel {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  margin: 22px 0; max-width: 68ch; overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 16px; border-bottom: 1px solid var(--hairline); background: var(--bg);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.panel-body { padding: 16px; }
.panel-body p { font-size: .875rem; margin: 0 0 10px; font-variant-numeric: tabular-nums; max-width: none; }
.panel-body p:last-child { margin-bottom: 0; }
.panel-body .note { font-size: .8125rem; color: var(--ink-soft); }

/* ── Tables ── */
.table-wrap {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  overflow-x: auto; margin: 22px 0;
}
table.data { width: 100%; border-collapse: collapse; font-size: .8125rem; }
table.data caption {
  caption-side: top; text-align: left; font-size: .75rem; color: var(--ink-soft);
  line-height: 1.5; padding: 12px 14px 10px; border-bottom: 1px solid var(--hairline);
}
table.data th {
  text-align: left; font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 10px 14px; border-bottom: 1px solid var(--hairline); vertical-align: bottom;
  white-space: nowrap;
}
table.data td {
  padding: 9px 14px; border-bottom: 1px solid var(--hairline);
  color: var(--ink); line-height: 1.5; vertical-align: top;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr.grp td {
  background: var(--bg); font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}

/* Chips are a shared component and live in cfc-tokens.css. */

/* ── Entry card (additive / nutrient definitions) ── */
.entry {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 16px 18px; margin: 0 0 12px; max-width: 68ch;
}
.entry-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.entry-name { font-family: 'Fraunces', Georgia, serif; font-size: 1rem; font-weight: 600; color: var(--ink); }
.entry-meta { font-size: .75rem; color: var(--ink-soft); margin: 0 0 10px; }
.entry p { font-size: .875rem; line-height: 1.65; margin: 0 0 10px; max-width: none; }
.entry p:last-child { margin-bottom: 0; }
.entry dl { margin: 0; }
.entry dt {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 10px;
}
.entry dd { font-size: .875rem; line-height: 1.6; margin: 2px 0 0; }

/* ── Two-up comparison ── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; max-width: 68ch; }
.compare > div { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; }
.compare h4 { margin: 0 0 8px; font-size: .875rem; }
.compare ul { margin: 0; padding-left: 18px; }
.compare li { font-size: .8125rem; line-height: 1.6; margin-bottom: 4px; }

/* ── Card grid (hub / next steps) ── */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; max-width: 68ch; }
.card {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 16px 18px; text-decoration: none; transition: border-color 150ms;
}
.card:hover { border-color: var(--accent); text-decoration: none; }
.card-eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.card-title { font-family: 'Fraunces', Georgia, serif; font-size: 1rem; font-weight: 600; color: var(--ink); }
.card-desc { font-size: .8125rem; line-height: 1.55; color: var(--ink-soft); }

/* ── Checklist ── */
.checklist { list-style: none; padding: 0; margin: 16px 0; max-width: 68ch; }
.checklist li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px;
  border: 1.5px solid var(--accent); border-radius: 3px;
}

/* ── Sources ── */
ul.sources { list-style: none; padding: 0; margin: 16px 0; max-width: 68ch; }
ul.sources li {
  font-size: .8125rem; line-height: 1.6; color: var(--ink-soft);
  padding: 9px 0; border-bottom: 1px solid var(--hairline); margin: 0;
}
ul.sources li:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Prev / next
   ══════════════════════════════════════════════════════════════════════════ */
.pagination {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--hairline);
  max-width: 68ch;
}
.pagination a {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px;
  background: var(--surface); text-decoration: none; transition: border-color 150ms;
}
.pagination a:hover { border-color: var(--accent); text-decoration: none; }
.pagination .dir { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.pagination .label { font-size: .9375rem; font-weight: 600; color: var(--accent); }
.pagination .next { text-align: right; }
.pagination .placeholder { border: 0; background: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Site footer
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer { border-top: 1px solid var(--hairline); background: var(--surface); margin-top: 40px; }
.site-footer-inner {
  max-width: 1440px; margin: 0 auto; padding: 40px 24px 28px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
}
.footer-brand { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', Georgia, serif; font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.footer-brand svg { width: 18px; height: 18px; color: var(--accent); }
.footer-tagline { font-size: .8125rem; line-height: 1.6; color: var(--ink-soft); margin: 10px 0 16px; max-width: 30ch; }
.footer-cta {
  display: inline-block; border: 1px dashed var(--hairline); border-radius: 8px;
  padding: 8px 16px; font-size: .8125rem; color: var(--accent); text-decoration: none;
}
.footer-cta:hover { border-color: var(--accent); }
.footer-col h3 { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: .8125rem; color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.site-footer-base {
  max-width: 1440px; margin: 0 auto; padding: 16px 24px 28px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .75rem; color: var(--ink-soft);
}
/* Both of these sit inside a sentence ("Built by Azqato. Product data from
   Open Pet Food Facts."), so they are prose links and carry the underline for
   the same WCAG 1.4.1 reason as .article a. The other footer links are lists
   of destinations, not links in running text, and are not affected. */
.site-footer-base a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.site-footer-base a:hover { text-decoration-thickness: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 0 32px; }
  .toc { display: none; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: 0 20px; }
  .nav-toggle { display: inline-flex; }
  .topbar-search { display: none; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; z-index: 90;
    width: min(84vw, var(--sidebar-w)); height: calc(100vh - var(--topbar-h));
    background: var(--surface); border-right: 1px solid var(--hairline);
    padding: 24px 12px 48px; transform: translateX(-102%);
    transition: transform 200ms ease; box-shadow: 0 8px 32px var(--shadow);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .sidebar-backdrop {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 80;
    background: var(--scrim); border: 0;
  }
  .article { padding-top: 22px; }
  .article h1 { font-size: 1.625rem; }
  .article h2 { font-size: 1.1875rem; margin-top: 38px; }
  .compare, .card-grid, .pagination { grid-template-columns: 1fr; }
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-brand { font-size: .9375rem; }
  .site-footer-inner { grid-template-columns: 1fr; }
}

/* WCAG 1.4.10 asks that 320px need no sideways scrolling. Below 400px the
   support button is what pushes the bar past the viewport, and it is the one
   thing in the bar the visitor did not come for: the wordmark, the search
   affordance, the theme toggle and the drawer all stay. The same link is in
   the footer of every page. */
@media (max-width: 400px) {
  .topbar-cta { display: none; }
}

/* Content starts below the fixed bar */
.shell { padding-top: var(--topbar-h); }

/* Tall enough that the footer starts below the fold on every page.

   Six of the nine application pages render their body from a fetch, so they
   are briefly a placeholder inside a short shell with the footer visible under
   it. When the content arrives the footer drops, and that is a layout shift of
   something the visitor was already looking at: the brand index scored 0.60
   and the search page 0.34 against a 0.10 budget, entirely from this. Reserving
   a viewport of height means the footer is never on screen to be moved.

   min-height, not height: a page longer than the viewport is unaffected, and
   the guide pages all are. */
.shell { min-height: 100vh; }

@media print {
  .topbar, .sidebar, .toc, .pagination, .site-footer { display: none; }
  .shell { display: block; padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Site navigation (M14)

   The two page families used to disagree about the top bar: the guide had a
   search field, a theme control and no page links at all, while the app pages
   had the page links and neither of the other two. One bar now carries all
   three.

   Above 900px the links sit inline. Below it they move into the drawer that
   already existed for the guide sidebar, which becomes a site menu with the
   guide's own section list nested underneath it. One control, two levels,
   rather than a hamburger next to a strip of links scrolling off the screen.
   ══════════════════════════════════════════════════════════════════════════ */
.topbar-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.topbar-nav a {
  font-size: .8125rem; color: var(--ink-soft); text-decoration: none;
  padding: 6px 9px; border-radius: 7px; white-space: nowrap;
  transition: color 150ms, background 150ms;
}
.topbar-nav a:hover:not([aria-current]) { color: var(--ink); background: var(--bg); }
.topbar-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* The drawer's site-menu block. On a guide page the section list follows it,
   so the label is what keeps the two levels apart. */
.sidebar-site { display: none; }

@media (max-width: 900px) {
  .topbar-nav { display: none; }
  /* Every page gets the drawer control now, not only the guide pages. */
  .nav-toggle { display: inline-flex; }
  .sidebar-site { display: block; }
}

/* An app page has no section list, so its drawer holds the site menu alone and
   the sidebar exists only below 900px. Both app shells are named: left in
   the grid on a wide screen the drawer takes a column of its own and pushes
   the article onto the next row, which is a blank page above the fold. */
.shell-app > .sidebar,
.shell-app-toc > .sidebar { display: none; }
@media (max-width: 900px) {
  .shell-app > .sidebar,
  .shell-app-toc > .sidebar { display: block; }
}