/* The app frame (ADR 0085, ADR 0090): a sidebar of places beside the page's
   content, and the drop-down menu look (native <details> disclosures of
   links, closed by static/shared/js/work_disclosures.js). Three apps use it:
   My work (plan/files/_shell.html), the Dashboard (public/dashboard.html)
   and an organization's pages (organizations/_shell.html), so it moved here
   from plan/css/work_frame.css on 2026-10-23 (frontend-css-conventions'
   third-app rule), rule for rule. My work's New menu stays in
   work_frame.css. Text and buttons follow the public pages: the site link
   colour, and the options-menu look of articles.css's
   .article-card__options-menu for the menus. */

/* --- Width: the frame runs the window's width (ADR 0092) -------------------- */

/* A page in the frame adds .container--frame to base.html's page container
   ({% block container_modifier %}), which drops the 1320px cap. The side
   padding takes the same steps as the top bar's (#siteNavbar >
   .container-fluid in base.html: 1rem, 1.5rem from 768px, 2rem from 992px),
   so the sidebar's left edge lines up with the logo and the main column's
   right edge with the account button at every width. Two classes so this
   wins over base.html's inline .container cap whatever the stylesheet
   order. The footer is not part of this: it keeps the site's one centred
   container on every page (product owner, 2026-10-24; it followed the frame's
   width for a few hours that day). */
.container.container--frame {
  max-width: none;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .container.container--frame {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 992px) {
  .container.container--frame {
    padding-inline: 2rem;
  }
}

/* --- The divider: a line from the bar to the footer (ADR 0092) -------------- */

/* A frame with a sidebar of places (My work, an organization's pages, Analytics) adds
   .container--divided as well. From 992px, where the sidebar is a column
   rather than a row of pills, the sidebar's cell runs the whole height
   between the top bar and the footer and draws the line on its right edge,
   so the line meets the bar's bottom border and the footer's top border.
   That takes three things:
   - the container has no padding above or below (Bootstrap's pt-3 / pb-4
     are !important, hence the two classes and !important here; the sidebar
     and the page's column carry that space themselves);
   - on a short page the container still reaches the footer: the body is a
     flex column (base.html's sticky footer), so its wrapper, <main> and the
     container become flex columns that grow; without :has() the line just
     ends with the content;
   - nothing sits above the grid in the container, since it would cross the
     line: the flash messages and the breadcrumb are inside the page's
     column (the shells' templates), as in the Members mockup.
   The Dashboard's left column of cards (.dashboard-side) takes the line too;
   its heading and Customize link are the first things in the main column,
   and the line is left out when every card in that column is hidden. */
@media (min-width: 992px) {
  .container.container--divided {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding-block: 0 !important;
  }

  body:has(.container--divided) > .flex-grow-1,
  body:has(.container--divided) #main-content {
    display: flex;
    flex-direction: column;
  }

  body:has(.container--divided) #main-content {
    flex: 1 0 auto;
  }

  .container--divided > .work-shell {
    flex: 1 0 auto;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
    align-items: stretch;
  }

  .container--divided .work-sidebar,
  .container--divided .dashboard-side {
    padding: 2rem 1.5rem 1.5rem 0;
    border-right: 1px solid #dee2e6;
  }

  .container--divided .work-shell__main {
    padding: 2rem 0 1.5rem 2rem;
  }
}

/* --- Frame: sidebar beside the content ------------------------------------ */

.work-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (min-width: 992px) {
  .work-shell {
    grid-template-columns: 14.5rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
}

.work-shell__main {
  min-width: 0;
}

/* --- Sidebar ---------------------------------------------------------------- */

.work-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.work-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-sidebar__list--more {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #dee2e6;
}

.work-sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.5rem;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  color: var(--site-text-color, #1d1d1f);
  font-size: 0.9375rem;
  text-decoration: none;
}

.work-sidebar__link:hover {
  background-color: #f1f3f5;
  color: var(--site-text-color, #1d1d1f);
}

/* The current page: bold text on a pale blue pill, so it doesn't rely on
   the colour alone (aria-current says it to assistive technology). */
.work-sidebar__link.is-current {
  background-color: #e9f2fc;
  color: #16233c;
  font-weight: 700;
}

.work-sidebar__link .bi {
  flex: 0 0 auto;
  font-size: 1.125rem;
}

.work-sidebar__quota {
  padding-inline: 1rem;
}

/* Below lg the sidebar sits above the content: New, then the places as a
   wrapping row of pills, so nothing hides behind a toggle. */
@media (max-width: 991.98px) {
  .work-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
  }

  .work-sidebar__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .work-sidebar__list,
  .work-sidebar__list--more {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .work-sidebar__link {
    min-height: 2.25rem;
    padding: 0.25rem 0.875rem;
    gap: 0.5rem;
  }

  .work-sidebar__quota {
    flex-basis: 100%;
    padding-inline: 0;
  }
}

/* --- Menus: native <details> disclosures of links --------------------------- */

.work-menu {
  position: relative;
}

.work-menu > summary {
  cursor: pointer;
  list-style: none;
}

.work-menu > summary::-webkit-details-marker {
  display: none;
}

.work-menu__panel {
  position: absolute;
  z-index: 1030;
  top: calc(100% + 0.375rem);
  left: 0;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.work-menu__panel ul {
  margin: 0 0 0.25rem;
  padding: 0;
  list-style: none;
}

.work-menu__heading {
  margin: 0.25rem 0.75rem 0.25rem;
  color: #5c6672;
  font-size: 0.8125rem;
  font-weight: 600;
}

.work-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: #212529;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.work-menu__item:hover,
.work-menu__item:focus-visible {
  background-color: #f1f3f5;
  color: #212529;
}

/* The current choice: a check plus bold text. */
.work-menu__check {
  visibility: hidden;
}

.work-menu__item[aria-current="true"] {
  font-weight: 700;
}

.work-menu__item[aria-current="true"] .work-menu__check {
  visibility: visible;
}