/* --- narrow screens --------------------------------------------------------- */

/* Narrow enough that the count and date columns cost more than they say:
   drop both from the rows and their two headers together. */
@media (max-width: 1100px) {
  .deck-cols {
    grid-template-columns: minmax(0, 1fr) 170px 100px;
  }

  .deck-cols > .row-when,
  .panel-head.deck-cols > :nth-child(3),
  .panel-head.deck-cols > :nth-child(4) {
    display: none;
  }

  /* The same for favourites: the author and the count go. */
  .fav-cols {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .fav-cols > :nth-child(2),
  .fav-cols > :nth-child(3) {
    display: none;
  }
}

@media (max-width: 900px) {
  .content {
    padding: 28px 20px 64px;
  }

  /* The panels leave the page and wait in a drawer that the top bar's menu
     button slides in over the content, the account at its foot — in every
     design: poster's row of chips becomes a list there. */
  .side-rail {
    display: none;
  }

  :root:has(.side-rail) button.sidebar-toggle {
    display: inline-flex;
  }

  /* The account is the drawer's; its button leaves the top bar. A visitor
     keeps the way to sign in there. */
  :root:has(.side-rail) .topbar .profile-link {
    display: none;
  }

  :root[data-drawer="open"] .side-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(340px, 88vw);
    overflow-y: auto;
    background: var(--surface);
    border-right: var(--border-w) solid var(--line);
    box-shadow: var(--menu-shadow);
    animation: drawer-in 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .side-rail > .sidebar {
    width: auto;
    flex-shrink: 0;
    border-right: none;
  }

  .side-rail > .sidebar + .sidebar {
    border-top: var(--border-w) solid var(--line);
  }

  [data-variant="poster"] .side-rail > .sidebar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    padding: 20px 16px;
  }

  [data-variant="poster"] .side-rail .side-link {
    width: 100%;
  }

  /* At the drawer's foot however long its lists, on its own ground. */
  .side-rail > .drawer-account {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding: 16px;
    border-top: var(--border-w) solid var(--line);
    background: var(--surface);
  }

  /* A page without panels: the account is all the drawer holds, from the
     top. */
  .side-rail:not(.has-panels) > .drawer-account {
    margin-top: 0;
    border-top: none;
  }

  .drawer-account .seg {
    display: flex;
  }

  .drawer-account .seg button {
    flex: 1 1 0;
    min-width: 0;
    font-size: 13px;
  }

  .drawer-account select.switcher {
    width: 100%;
  }

  button.drawer-look-toggle {
    justify-content: space-between;
    width: 100%;
    margin-top: 12px;
  }

  button.drawer-look-toggle .chevron {
    transition: transform 180ms ease;
  }

  button.drawer-look-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
  }

  .drawer-sign-in {
    justify-content: center;
  }


  :root[data-drawer="open"]:has(.side-rail) .drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 69;
    display: block;
    background: rgba(12, 12, 12, 0.38);
  }

  .login {
    min-height: 0;
  }

  .login-col {
    width: 100%;
    padding: 20px 20px 40px;
  }

  .login-art {
    display: none;
  }
}

@media (max-width: 760px) {

  /* The page's edges line up with the top bar's. */
  .content {
    padding-inline: 16px;
  }

  .profile-name {
    display: none;
  }

  /* Both tables collapse to a stacked card per row. */
  .deck-cols,
  .card-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, a card has no single line to centre on: each side gets a line
     of its own, text centred in it, and the grip goes back to the front
     side's line, as tall as a tap target. */
  .row.card-cols .card-side {
    display: flex;
    align-items: center;
    min-height: 34px;
  }

  .row.card-cols > .row-grip {
    top: 11px;
    bottom: auto;
    height: 44px;
  }

  /* The buttons and the checkbox go to the right of the two sides, two to a
     line, rather than onto a line of their own under them: out of edit mode
     they are hidden, and a hidden line would be a blank one. */
  .card-cols {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .row.card-cols .front {
    grid-column: 1;
    grid-row: 1;
  }

  .row.card-cols .back {
    grid-column: 1;
    grid-row: 2;
  }

  .row.card-cols .row-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(2, 44px);
    gap: 0 4px;
    align-self: center;
  }

  .composer-one,
  .composer-many {
    grid-template-columns: minmax(0, 1fr);
  }

  .composer-one button {
    justify-self: start;
  }

  /* The top bar is one row: the menu, the mark, where the page is, the
     search and the server's dot. Everything else is in the drawer the menu
     opens, and the bar leaves the cards their screen. */
  .topbar {
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 56px;
    padding: 6px 12px;
  }

  .topbar-right {
    display: contents;
  }

  button.sidebar-toggle {
    order: -2;
    flex-shrink: 0;
  }

  .brand {
    order: -1;
    flex-shrink: 0;
  }

  .brand > span {
    display: none;
  }

  /* Where the page is: its own step and the one above it, shortened with an
     ellipsis rather than wrapped; the drawer has the rest. */
  .crumbs {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
  }

  .crumbs > :not(:nth-last-child(-n + 3)) {
    display: none;
  }

  .crumbs > a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .crumbs > a[href] {
    flex-shrink: 2;
  }

  /* The search as an icon; the palette it opens has the room. */
  button.search-trigger {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .search-trigger-label,
  .search-trigger-key {
    display: none;
  }

  .topbar .status-dot {
    margin-inline: 2px;
  }

  /* The select bar stays one line, as tall as the composer put away above
     it. */
  .select-bar > .fold-body {
    flex-wrap: nowrap;
  }

  /* A card's checkbox takes the right-hand column of its two-by-two
     buttons, under the select bar's own at the far end. */
  .row.card-cols .row-actions .card-select {
    grid-column: 2;
  }

  .panel-head {
    display: none;
  }

  .row-when,
  .access {
    line-height: 1.5;
  }

  .row-actions {
    justify-content: flex-start;
  }

  /* The header's actions drop below the title here, flush left: the pair
     that shares their cell lines up on that edge too. */
  .deck-actions > .action-set {
    justify-content: flex-start;
    /* Three buttons — with the one for the study blocks — are wider than a
       phone: the last goes to a row of its own. */
    flex-wrap: wrap;
  }

  .topic-grid,
  .public-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The way to the whole catalogue, a row of its own under its heading. */
  .section-head > .btn-link {
    flex: 1 1 100%;
  }

  /* A deck's toolbar, one full-width row per job — the order, then the
     search — instead of controls scattered over both edges as they wrap. */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .sort-bar {
    flex-wrap: nowrap;
  }

  /* The choices say what they are; the group keeps its label for a screen
     reader. */
  .sort-bar > .toolbar-label {
    display: none;
  }

  .sort-bar > .seg {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* The row shared out by the labels' lengths. Short of room, the longest
     label goes onto two lines, broken between its words rather than pushing
     the row past the screen. */
  .sort-bar > .seg button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    font-size: 13px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  /* The reshuffle, as a square at the row's end. */
  .sort-bar > .sort-shuffle-fold {
    flex: 0 0 auto;
  }

  .sort-shuffle-fold button.sort-shuffle {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .sort-shuffle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .toolbar-end {
    margin-left: 0;
  }

  .toolbar-end > .card-search {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* The narrowest phones: the order picker's labels a size down, so its row
   still fits beside the reshuffle. */
@media (max-width: 359px) {
  .sort-bar {
    --sort-gap: 6px;
  }

  .sort-bar > .seg button {
    padding-inline: 4px;
    font-size: 12px;
  }
}

@keyframes drawer-in {
  from {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-rail {
    animation: none !important;
  }
}