/* Project page: full-bleed shell and section tabs. */

/* clip, not hidden: it contains stray overflow without turning the shell into
   a scroll container, which would break the sticky folder sidebar. */
.shell.is-wide { width: 100%; max-width: 100%; padding: 34px 0 90px; overflow-x: clip; }
.shell.is-wide .view-nav { padding: 0 clamp(22px, 4vw, 64px); }
.shell.is-wide #view-panel { padding: 0 clamp(22px, 4vw, 64px); }

/* Phone navigation. Five sections wrap the tab row on a handset, so below 700px
   the open section's name takes over and a caret turns it into the list of the
   others — the same mechanic the home page uses for its title. */
.project-view-switch { display: none; }

@media (max-width: 700px) {
  .view-nav { display: none; }

  .project-view-switch { position: relative; display: block; margin-bottom: 20px; padding: 0 clamp(22px, 4vw, 64px); }
  .project-view-toggle {
    display: inline-flex; align-items: center; gap: .3em; max-width: 100%; padding: 0;
    border: 0; background: transparent; color: var(--ink); cursor: pointer;
    font: 400 27px/1.1 var(--serif); letter-spacing: -.01em; text-align: left;
  }
  .project-view-caret {
    width: 0; height: 0; flex: none; margin-bottom: .12em;
    border: .17em solid transparent; border-bottom: 0; border-top-color: currentColor; opacity: .55;
  }
  .project-view-toggle[aria-expanded="true"] .project-view-caret { opacity: 1; transform: rotate(180deg); }

  .project-view-menu {
    position: absolute; z-index: 60; top: calc(100% + 7px); left: clamp(22px, 4vw, 64px);
    max-height: min(58vh, 420px); width: min(240px, calc(100vw - 40px)); overflow-y: auto;
    border: 1px solid var(--line); border-radius: 3px; background: var(--paper-raised); box-shadow: var(--shadow);
  }
  .project-view-menu[hidden] { display: none; }
  .project-view-menu-item {
    min-height: var(--tap); display: block; width: 100%; padding: 0 16px;
    border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink);
    cursor: pointer; font: var(--text-reading)/1.35 var(--sans); text-align: left;
  }
  .project-view-menu-item:last-child { border-bottom: 0; }
  .project-view-menu-item.is-active { color: var(--blue); }
}