/* --- layout ----------------------------------------------------------- */

.shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 65px);
}

.sidebar {
  width: 280px;
  flex-shrink: 0;
  padding: 28px 16px;
  border-right: var(--border-w) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* On a deck's page the topics give way to the deck's topic's decks; sage,
   whose tree holds both, and paper, browsing up a level, bring them back. */
.pane-topics {
  display: none;
}

/* The wrapper around a page's side panels: nothing of its own beside the
   content, where the panels are the shell's columns; the drawer they share
   on a narrow screen, with the account at its foot. On every page — it has
   the panels only where the page does (`has-panels`). */
.side-rail {
  display: contents;
}

/* The account is in the top bar's menu on a wide screen; only the drawer
   holds it (17-narrow.css). */
.drawer-account {
  display: none;
}

/* A topic's decks under it: drawn only where they are seen — the sage
   tree folds them open and shut (sage.css); elsewhere a shut fold is not
   laid out at all. */
.side-fold:not(.open) {
  display: none;
}

/* A panel's head: its title, or the search over its list, and its buttons. */
.sidebar-head {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
  margin: -8px 0 6px;
}

.sidebar-head > .sidebar-title {
  flex: 1;
  min-width: 0;
  padding-bottom: 0;
}

.sidebar-head button.side-btn {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
}

.sidebar-head input.side-search {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 4px 10px;
  font-size: 14px;
}

/* A topic's row, with room for its buttons: sage's twisty at the left, and
   at the right paper's way back down to the decks while browsing up. The
   decks under it, sage's tree's second level, come after the row. */
.side-item {
  position: relative;
  display: flex;
  flex-direction: column;
}

button.side-expand,
button.side-twisty,
button.side-back,
.side-children {
  display: none;
}

button.side-expand,
button.side-twisty {
  position: absolute;
  top: 6px;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
}

button.side-expand {
  right: 4px;
}

/* The shared chevron points down; these point on, into the decks — the
   twisty turns down once they are open. */
button.side-expand .ico,
button.side-twisty .ico {
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

.side-item.open > button.side-twisty .ico {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  button.side-twisty .ico {
    transition: none;
  }
}

.side-empty {
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--muted);
}

/* The ways back to the panels: the drawer's button in the top bar on a
   narrow screen, and on a wide one, once they are hidden, a button at the
   page's left edge under the top bar. Neither exists without panels, nor in
   the poster variant, whose panels are a row of chips. */
button.sidebar-toggle,
button.sidebar-reveal {
  display: none;
}

button.sidebar-reveal {
  position: fixed;
  top: calc(64px + 16px);
  left: 12px;
  z-index: 15;
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-card);
}

/* Put away on a wide screen. A panel folds to nothing sideways rather than
   vanishing, and the content beside it widens to fill the room as it goes. */
@media (min-width: 901px) {
  :root:not([data-variant="poster"]) .side-rail > .sidebar {
    transition:
      width 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
      padding 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
      border-width 240ms ease,
      opacity 160ms ease,
      visibility 240ms;
  }

  :root[data-sidebars="hidden"]:not([data-variant="poster"]) .side-rail > .sidebar {
    width: 0;
    padding-inline: 0;
    border-right-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
  }

  /* The content makes room at its left edge for the button that brings
     the panels back. */
  :root:not([data-variant="poster"]) .side-rail.has-panels ~ .content {
    transition: padding-left 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  :root[data-sidebars="hidden"]:not([data-variant="poster"]) .side-rail.has-panels ~ .content {
    padding-left: 64px;
  }

  :root[data-sidebars="hidden"]:not([data-variant="poster"]):has(.side-rail.has-panels) button.sidebar-reveal {
    display: inline-flex;
    animation: reveal-in 200ms ease 120ms backwards;
  }

}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root .side-rail > .sidebar {
    transition: none !important;
  }

  button.sidebar-reveal {
    animation: none !important;
  }
}

.drawer-backdrop {
  display: none;
}

.sidebar-title {
  padding: 0 12px 10px;
  font-size: 12px;
  letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform);
  color: var(--muted);
}

.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 15px;
}

.side-link:hover {
  background: var(--chip);
  color: var(--ink);
  text-decoration: none;
}

.side-link.active {
  background: var(--accent-soft);
  font-weight: 600;
}

.side-glyph {
  width: 30px;
  flex-shrink: 0;
  font-family: var(--font-display);
  color: var(--accent-text);
}

.side-label {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* As wide as the widest count a deck can have (500 cards, three digits),
   right-aligned in figures of one width: the access icons just before it
   then stand in one column, whatever the counts. In `em`, not `ch`: the
   current row's count is bolder, and `ch` would widen with it. */
.side-count {
  flex-shrink: 0;
  min-width: 2.4em;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--muted);
}

.side-link.active .side-count {
  color: var(--ink-soft);
  font-weight: 500;
}

.side-link.add {
  color: var(--muted);
}

/* A deck's tags have no room in a side row; its access fits as an icon. */
.side-tags {
  display: none;
}

.access.compact {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 1;
}

.content {
  flex-grow: 1;
  min-width: 0;
  padding: 40px 48px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* The column's blocks keep their own height. Where the column is given one
   (the sage variant fixes it to the viewport and scrolls it), flex would
   otherwise shrink them to fit — and a panel, clipping its overflow, would
   hide the rest of its list instead of letting the column scroll. */
.content > * {
  flex-shrink: 0;
}

.content.narrow > * {
  max-width: 680px;
}