/* ============================================================================
   APP SHELL — FE Client
   The frame the navbar sits in. Page sections land inside .shell__main.
   ========================================================================== */

.shell {
  display: flex;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  flex-direction: column;
  /* See the note on `body` in base.css — the page is the sunken layer. */
  background: var(--color-surface-sunken);
}

.shell__main {
  flex: 1 1 auto;
  inline-size: 100%;
  /* Full width; the column row below carries the max-width, because the cap
     only engages in the widest band.
     A symmetric 24px gutter, which is what the Figma `b/main wrapper` uses on
     every side (children at y=24 in a wrapper 48 taller than they are). It also
     has to match the rails' height formula: they are `100dvh - navbar - 24 * 2`,
     so any larger bottom padding would push the page past the viewport and
     produce a scrollbar with no content to scroll. */
  padding: var(--layout-gutter);
}

/* ============================================================================
   LAYOUT RULES — Figma "Breakpoints", FE Client file, node 46639:730707
   Derived from the frame geometry, which is consistent across both the
   `Body / Newsfeed` row and the `Communities / Detail` (body-full-width) row.

   Four bands. The widest is named "More than 1920px" in the file itself:

   | Viewport      | Left rail        | Right rail | Column row      |
   |---------------|------------------|------------|-----------------|
   | < 1024        | hidden           | hidden     | full width      |
   | 1024 - 1199   | 64  (collapsed)  | 400        | full width      |
   | 1200 - 1920   | 256              | 400        | full width      |
   | > 1920        | 256              | 400        | capped, centred |

   Constants, all verified against the frames:
     gutter 24 - column gap 16 - left 256 / 64 - right 400
     body inner cap 600 (newsfeed) or 1016 (body full width)
     row cap 1288 = 256 + 16 + 600 + 16 + 400 - and also 256 + 16 + 1016,
     which is why one number covers both page types.

   TODO(tokens): breakpoints and size are both recorded as not built in
   DESIGN.md §12.4, so these are literals. The custom properties below are
   app-level, not DS tokens - they exist so each number appears once.
   ========================================================================== */

:root {
  --layout-gutter: var(--space-lg); /* 24 */
  --layout-gap: var(--space-md); /* 16 */
  --layout-rail-left: 256px;
  --layout-rail-left-collapsed: 64px;
  --layout-rail-right: 400px;
  --layout-body-max: 600px;
  --layout-body-max-wide: 1016px;
  --layout-row-max: 1288px;
}

.shell__columns {
  display: flex;
  /* `start` is what lets the left rail's position: sticky work - a stretched
     flex item cannot stick. */
  align-items: start;
  gap: var(--layout-gap);
}

.shell__content {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* The body's own measure. The middle column flexes; the content inside it is
   capped and centred, which is what every frame from 767 up shows. */
.shell__body {
  max-inline-size: var(--layout-body-max);
  margin-inline: auto;
}

/* The `Body full width` axis has THREE values in the file, not two - the
   bottom-row labels read "Off", "Default" and "On":
     Off      capped at 600 and centred   (default for the newsfeed)
     Default  fills the middle column, no cap
     On       capped at 1016 and centred  (Communities / Detail)
   All three are confirmed by the frames; see the collapsed-band override. */
.shell__columns[data-body-width="fill"] .shell__body {
  max-inline-size: none;
}
.shell__columns[data-body-width="wide"] .shell__body {
  max-inline-size: var(--layout-body-max-wide);
}

/* Sidebar / Right - 400px, appears at 1024. */
.shell__rail {
  inline-size: var(--layout-rail-right);
  flex: none;
}

/* --- Band 1: below 1024 - one column, both rails out of the row ----------- */
@media (max-width: 1023px) {
  .shell__columns {
    flex-direction: column;
    /* Once the axis flips, `start` becomes the cross axis and would shrink both
       children to their content width. */
    align-items: stretch;
  }

  /* Figma hides the right rail entirely below 1024.
     Scoped to the row so it outranks `.rail { display: flex }` in rail.css,
     which is a single class and loads later. */
  .shell__columns .shell__rail {
    display: none;
  }
}

/* --- Band 2: 1024-1199 - the left rail collapses to 64 -------------------- */
@media (min-width: 1024px) and (max-width: 1199px) {
  .shell__columns {
    --layout-rail-left: var(--layout-rail-left-collapsed);
  }

  /* This band is the "2 Columns - Small Screen" layout, and the file specs it
     with `Body full width: Default` - so the 600 measure is dropped and the
     body fills what is left between the two rails. That is why the frames show
     480 / 655 here rather than a capped 600. The `wide` (1016) measure still
     applies - the 1199 Communities frame caps and centres at 1016. */
  .shell__columns[data-body-width="default"] .shell__body {
    max-inline-size: none;
  }
}

/* --- Band 4: above 1920 - the row stops growing and centres ---------------
   The file names this band "More than 1920px". At 1920 the frames still run to
   the gutters, so the cap engages strictly above it. */
@media (min-width: 1921px) {
  .shell__columns {
    max-inline-size: var(--layout-row-max);
    margin-inline: auto;
  }
}

/* --- Layout axis: 1 column - no right rail at any width ------------------- */
.shell__columns[data-layout="1-col"] .shell__rail {
  display: none;
}

/* --- Placeholder for the sections that come after the navbar ------------- */
.placeholder {
  display: flex;
  min-block-size: 320px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  /* A card on the sunken page, like the menu beside it — and flat like it too,
     so the two do not read as different treatments. This is throwaway
     scaffolding; the real feed replaces it. */
  background: var(--color-surface-raised);
  border-radius: var(--shape-radius-card);
}

.placeholder--rail {
  min-block-size: 160px;
}

.placeholder__title {
  margin: 0;
}

.placeholder__body {
  margin: 0;
  max-inline-size: 52ch;
  color: var(--color-content-secondary);
}

/* Figma keeps the same 24px gutter at every width - the 375 frames put the Body
   Wrapper at x=24, y=24 too - so there is no narrow-width override at all. */