/* ============================================================
   APP SHELL — sidebar + topbar + content
   ------------------------------------------------------------
   Desktop: a fixed sidebar beside a scrolling content column.
   Mobile:  the sidebar is dropped and a tab bar takes over.
   ============================================================ */

.ice-shell {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}

/* --- The gutter ---------------------------------------------
   One number, declared once. The sidebar is pinned to the viewport
   and inset by it on all four sides; the content column is pushed
   clear of the sidebar by the same amount. Changing --shell-gutter
   moves both together. */
/* On :root, not on .ice-shell — the pinned account block lives
   outside the shell and needs the same number. */
:root { --shell-gutter: var(--space-24); }

@media (min-width: 1024px) {
  .ice-shell {
    padding: var(--shell-gutter);
    padding-inline-start: calc(
      var(--shell-gutter) + var(--width-sidebar) + var(--shell-gutter));
  }
}

/* --- Sidebar ------------------------------------------------
   Fixed and full-height: it never scrolls with the feed, and its
   own contents scroll if the nav ever outgrows the viewport. */
/* Figma 47:3209 — 300 wide, 6 of padding so the active row's fill
   never touches the edge, and its three blocks pushed apart. */
.ice-sidebar {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-32);
  padding: var(--space-6);
  border-radius: var(--radius-16);
}

@media (min-width: 1024px) {
  .ice-sidebar {
    display: flex;
    position: fixed;
    inset-block: var(--shell-gutter);
    inset-inline-start: var(--shell-gutter);
    inline-size: var(--width-sidebar);
    overflow-y: auto;
    z-index: var(--z-sticky);
  }
}

.ice-sidebar__nav  { flex: 1 0 0; }
.ice-sidebar__foot { margin-block-start: auto; }

/* Workspace switcher — drawn as a filled field, so it reads as
   something you open rather than something you click through.
   Figma 86:15699. */
.ice-workspace {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  block-size: var(--height-l);
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-20);
  border-radius: var(--radius-12);
  border: var(--border-w) solid var(--field-border-filled);
  background-image: var(--elev-primary-3-image);
  box-shadow: var(--shadow-m);
  backdrop-filter: blur(var(--shadow-m-blur));
  -webkit-backdrop-filter: blur(var(--shadow-m-blur));
  cursor: pointer;
}
.ice-workspace__logo {
  inline-size: 42px;
  block-size:  42px;
  border-radius: var(--radius-9);
  object-fit: cover;
  flex-shrink: 0;
}
.ice-workspace__name {
  flex: 1 0 0;
  min-inline-size: 0;
  font-size: var(--type-h6-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h6-leading);
  letter-spacing: var(--type-h6-track);
  color: var(--fg-high);
}

/* --- Topbar -------------------------------------------------
   Desktop only. On mobile its jobs are split between the appbar
   (workspace + account) and the tab bar (navigation). */
.ice-topbar { display: none; }

@media (min-width: 1024px) {
  /* Two tracks: the middle one is the width of the content column,
     so the controls line up with what is under them. */
  .ice-topbar {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--width-content)) 1fr;
    align-items: center;
    gap: var(--space-12);
    padding-block-end: var(--space-20);
  }
}

.ice-topbar__main {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-inline-size: 0;
}

/* Account and notifications are pinned to the viewport, not laid out
   in the topbar: they must never push the page's own content around,
   and the Preferences page has no topbar at all. Figma 87:17516. */
.ice-topbar__end {
  position: fixed;
  inset-block-start: var(--shell-gutter);
  inset-inline-end: var(--shell-gutter);
  z-index: var(--z-nav);

  display: flex;
  align-items: center;
  gap: var(--space-20);
}

/* The account avatar sits in a 2px ring of the densest glass, so it
   reads as a control rather than a picture. Figma 47:3340. */
.ice-account {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.ice-account__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--height-l);
  block-size:  var(--height-l);
  border-radius: var(--radius-full);
  background-image: var(--elev-secondary-2-image);
  box-shadow: inset 0 2px 6px 0 color-mix(in srgb, var(--shadow-ink) 30%, transparent);
  color: var(--fg-medium);
}

/* The dot between the "Récents" button and the search field. */
.ice-topbar__dot {
  inline-size: var(--space-4);
  block-size:  var(--space-4);
  border-radius: var(--radius-full);
  background-color: var(--accent);
  opacity: .5;
  flex-shrink: 0;
}

/* The keyboard-shortcuts button, pinned to the bottom corner. */
.ice-fab {
  position: fixed;
  inset-block-end: var(--space-24);
  inset-inline-end: var(--space-24);
  z-index: var(--z-nav);
}

/* --- The keyboard-shortcuts panel — Figma 93:20638 -----------
   A popover's content, so it brings its own padding. The keycaps
   are not a new component: they are the outlined neutral chip at
   size S, which is already 28 tall with a 12 icon.               */
.ice-shortcuts {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24);
  /* The width is the CONTENT's, not the shell's — the popover is
     max-content, so this is what it measures. 300 is drawn. */
  inline-size: var(--w-300);
}

.ice-shortcuts__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.ice-shortcut {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
/* The label takes the slack, so every keycap lines up on the right
   however long the wording gets. */
.ice-shortcut > span:first-child { flex: 1 0 0; min-inline-size: 0; }

/* --- A page that does not scroll ----------------------------
   The digest is a deck, and a deck is a fixed thing you act on —
   not a document you move through. On desktop it fits, so the page
   is clipped to the viewport.

   `clip`, not `hidden`: hidden makes a scroll container, which is
   exactly what we are trying to avoid. A card thrown off the table
   would give it something to scroll to, and the scrollbars would
   appear and shift the whole page for the length of the throw.

   Only here, and only on desktop — everywhere else, and on every
   phone, the page scrolls normally. */
@media (min-width: 1024px) {
  :root:has(> body[data-page="digest"]) { overflow: clip; }
}

/* --- Content ------------------------------------------------ */
.ice-main {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding-inline: var(--space-20);
  padding-block: var(--space-20);
}
@media (min-width: 1024px) {
  /* The shell already provides the gutter — main must not double it. */
  .ice-main { padding: 0; }
}

/* The feed column is capped and centred in whatever space is left
   over after the sidebar. `margin-inline: auto` on a flex child does
   it — the topbar above stays full-width. */
.ice-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  inline-size: 100%;
  max-inline-size: var(--width-content);
  margin-inline: auto;
  padding-block: var(--space-48);
}

.ice-page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
}
.ice-page-head > p { display: flex; align-items: baseline; gap: var(--space-4); }

/* --- Mobile header ------------------------------------------ */
.ice-appbar {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  block-size: 50px;
  padding-inline: var(--space-32);
}
@media (min-width: 1024px) { .ice-appbar { display: none; } }

.ice-appbar__title {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  font-size: var(--type-h2-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-track);
  color: var(--fg-high);
  text-shadow: var(--text-shadow-legible);
}

/* --- Bottom bar wrapper ------------------------------------- */
.ice-bottom {
  position: sticky;
  inset-block-end: 0;
  margin-block-start: auto;
  z-index: var(--z-nav);
}
@media (min-width: 1024px) { .ice-bottom { display: none; } }

/* The right rail used to live here as a third shell column. It is
   now per-card — see components/_card.css. */