/* The settings navigation: a column of sections down the left, and on a phone
   a page of its own that a section opens from.

   Split out of settings.css because it is a component rather than a screen -
   and because keeping both in one file took it past the 250-line limit.
*/

/* The settings screen is not a card in a padded page: the menu column runs
   from under the header to the footer, against the edge, with one rule down
   its right side. That is what the handoff draws (158), and a card floating in
   a 28px margin is what it replaced.

   Height: the header is 68px and the footer is 20px of padding either side of
   one line, so the column fills what is left rather than ending where its
   items do. */
#settings.panel {
  padding: 0;
  max-width: none;
}

#settings .settings-card {
  border: 0;
  border-radius: 0;
  min-height: calc(100vh - 68px - 63px);
}

/* The columns live here, with the breakpoints that change them: settings.css
   loads later, so a width declared there would win over the phone layout. */
.settings-card {
  grid-template-columns: 240px minmax(0, 1fr);
}

.settings-menu {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding: 0 16px 24px;
  border-right: 1px solid var(--c-neutral-2);
  overflow: auto;
}

/* The column names the sections, so the content column no longer needs a
   heading that says "Settings" and nothing else. */
.settings-menu-head {
  font: var(--t-body-small-500);
  color: var(--c-neutral-9);
  padding: 24px 0 4px;
}

/* The second group, "Admin only", under a rule (WEB-PUSH §2, board 185). */
.settings-menu-head-next {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--c-neutral-2);
}

.settings-menu-item {
  appearance: none;
  border: none;
  background: none;
  text-align: left;
  padding: 9px 14px;
  border-radius: 8px;
  font: var(--t-body-primary-400);
  color: var(--c-neutral-11);
  cursor: pointer;
  transition:
    background-color var(--transition-default),
    color var(--transition-default);
}

.settings-menu-item:hover {
  background: var(--surface-hover);
  color: var(--c-white);
}

.settings-menu-item-active,
.settings-menu-item-active:hover {
  background: var(--c-neutral-1);
  font: var(--t-body-primary-500);
  color: var(--c-white);
}

/* The way back, which exists only on the phone. */
.settings-back {
  display: none;
  align-items: center;
  column-gap: 10px;
  padding: 16px 20px 0;
}

.settings-back button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--c-blue-lighter);
  font: var(--t-body-primary-400);
  cursor: pointer;
}

.settings-back span {
  font: var(--t-body-primary-500);
  color: var(--c-white);
}

@media (max-width: 900px) {
  .settings-card {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .settings-content {
    padding: 24px 20px 28px;
  }
}
/* A 210px column on a 390px screen is a fiction. The menu becomes the page and
   a section opens as its own view with a way back - list to detail, which is
   what the phone already does everywhere else here. */
@media (max-width: 640px) {
  .settings-card {
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    border-radius: 0;
  }

  .settings-menu {
    border-right: 0;
    padding: 0 16px 16px;
  }

  .settings-menu-item {
    padding: 14px;
  }

  /* One of the two is the page at any moment. */
  .settings-card[data-showing="section"] .settings-menu,
  .settings-card:not([data-showing="section"]) .settings-content {
    display: none;
  }

  .settings-back {
    display: flex;
  }

  /* The back row already names the section (board 160). Repeating it as a
     heading underneath says the same word twice on the narrowest screen
     there is. The subtitle stays - it is the part that says something. */
  .settings-head h1 {
    display: none;
  }
}