/* ---------------------------------------------------------------------------
   allyway — application shell
   ---------------------------------------------------------------------------
   Two densities live here, because both navigation models from the handoff
   ship:

     [data-density="dense"]  1a — three panes, tag rail, dense table rows
     [data-density="roomy"]  1b — two panes, no rail, search owns the header

   Breakpoints are in rem, not px, so they respond to a browser text-size
   preference as well as to page zoom. The panes collapse before the detail
   pane can be squeezed under ~30rem, and below 48rem the list and the detail
   become separate pages, as drawn in 1f.

   Either navigation column can also be folded away by hand; that lives at the
   bottom of this file. The endpoint list's own rules are in list.css.
--------------------------------------------------------------------------- */

/*
 * Custom elements are `display: inline` until told otherwise, and several of
 * these sit directly between a pane and the thing that is supposed to fill it.
 * An undeclared element in that position quietly swallows `flex: 1` from the
 * child below it, which is how the endpoint list ended up taller than the
 * window instead of scrolling inside it.
 */
aw-app,
aw-topbar,
aw-search-block,
aw-meta-strip,
aw-tag-rail,
aw-facets,
aw-endpoint-list,
aw-verb-bar,
aw-tag-chips,
aw-detail,
aw-code-block,
aw-try-it,
aw-import { display: block; }

/* The list component *is* the pane's contents, so it takes the pane's shape:
   a column whose middle section scrolls. */
.pane--list > aw-endpoint-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/*
 * The browser is a fixed frame, as the design draws it: the banner stays put
 * and each pane scrolls inside its own bounds, so the endpoint list is a column
 * you can run down without the whole page moving under the detail beside it.
 *
 * Below the two-pane breakpoint this is dropped and the page scrolls normally
 * — on a phone the detail is a pushed page of its own, and a document that
 * scrolls with the browser chrome beats a pane that scrolls inside it.
 */
@media (min-width: 48.0625rem) {
  .app--browse {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
}

/* --- top bar (1a) -------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-14);
  min-height: var(--h-52);
  padding: var(--s-8) var(--s-16);
  border-bottom: var(--rule-w-strong) solid var(--rule-strong);
  flex-wrap: wrap;
}

.wordmark {
  font: 600 var(--t-13) / 1 var(--font-mono);
  letter-spacing: var(--ls-wordmark);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); text-decoration: none; }

.topbar__divider {
  width: 1px;
  height: 1.25rem;
  background: var(--divider-quiet);
  flex: none;
}

.topbar__search {
  flex: 1 1 14rem;
  max-width: 23.75rem; /* 380px */
}

.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-10);
  flex-wrap: wrap;
}

/* The document's own version. Static text, not a menu: the handoff descoped
   environment switching, and a disclosure caret that discloses nothing is
   worse than no caret. */
.version-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-7);
  height: var(--h-30);
  padding: 0 var(--s-10);
  border: var(--rule-w) solid var(--ink);
  font: 500 var(--t-11-5) / 1 var(--font-mono);
  white-space: nowrap;
}

/* --- schema meta strip --------------------------------------------------- */
.meta-strip {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  flex-wrap: wrap;
  min-height: var(--h-34);
  padding: var(--s-6) var(--s-16);
  background: var(--paper-alt);
  border-bottom: var(--rule-w) solid var(--rule);
  font: 400 var(--t-11-5) / 1.4 var(--font-mono);
  color: var(--ink-55);
}
.meta-strip__name { color: var(--ink); font-weight: 500; }
.meta-strip__end { margin-left: auto; display: flex; gap: var(--s-12); align-items: center; }
.dot { color: var(--ink-55); }

/* --- body grid ----------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--w-rail) var(--w-list) minmax(0, 1fr);
  min-height: 0;
}
/*
 * A grid's implicit row is `auto`, which means "as tall as the tallest pane"
 * — so a long detail pane would grow the row, and the panes would never reach
 * the point of scrolling inside themselves. Pinning the row to the available
 * space is what makes `overflow` on the panes mean anything.
 */
.app--browse .shell {
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr);
}
.app--browse .main { grid-template-rows: minmax(0, 1fr); }

.rail {
  border-right: var(--rule-w-strong) solid var(--rule-strong);
  padding: var(--s-14) 0;
  overflow-y: auto;
  min-height: 0;
}

.main {
  display: grid;
  grid-template-columns: var(--w-list) minmax(0, 1fr);
  grid-column: 2 / -1;
  min-height: 0;
}

.pane {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pane--list { border-right: var(--rule-w-strong) solid var(--rule-strong); }
.pane--detail { overflow-y: auto; }

/* Roomy (1b): no rail, a wider list, and the search block owns the header. */
[data-density='roomy'] .shell { grid-template-columns: minmax(0, 1fr); }
[data-density='roomy'] .rail { display: none; }
[data-density='roomy'] .topbar { border-bottom: 0; padding: var(--s-18) var(--s-22) var(--s-8); }
[data-density='roomy'] .main {
  grid-column: 1 / -1;
  grid-template-columns: var(--w-list-roomy) minmax(0, 1fr);
}

/* --- responsive ---------------------------------------------------------- */

/* Two panes: the rail folds into a chip row above the list. */
@media (max-width: 75rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .main { grid-column: 1 / -1; grid-template-columns: var(--w-list) minmax(0, 1fr); }
}

@media (max-width: 62rem) {
  .main,
  [data-density='roomy'] .main { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}

/* One column: list and detail become separate pages (1f). */
@media (max-width: 48rem) {
  .main,
  [data-density='roomy'] .main { grid-template-columns: minmax(0, 1fr); }
  .pane--list { border-right: 0; }
  .app[data-mobile-view='list'] .pane--detail { display: none; }
  .app[data-mobile-view='detail'] .pane--list { display: none; }
  /* Header chrome gets out of the way on a phone: the version is already in
     the meta strip, and the search takes a clean row of its own. */
  .topbar { min-height: var(--h-44); padding: var(--s-6) var(--s-14); gap: var(--s-10); }
  .topbar__divider { display: none; }
  .version-chip { display: none; }
  .topbar__search { order: 3; flex-basis: 100%; max-width: none; height: var(--h-44); }
  .topbar__right { gap: var(--s-8); }
  .meta-strip { padding: var(--s-6) var(--s-14); }
  .meta-strip__fact,
  .meta-strip .dot { display: none; }
}

/* Only shown when the detail is a pushed page. */
.detail-back { display: none; }
@media (max-width: 48rem) {
  .detail-back {
    display: flex;
    align-items: center;
    gap: var(--s-10);
    min-height: var(--h-44);
    padding: var(--s-6) var(--s-14);
    border-bottom: var(--rule-w-strong) solid var(--rule-strong);
  }
  .detail-back__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--h-44);
    padding: var(--s-8) 0;
    font: 600 var(--t-12) / 1 var(--font-sans);
    color: var(--ink);
    text-decoration: none;
  }
  .detail-back__link:hover { color: var(--ink); text-decoration: underline; }
  .detail-back__end { margin-left: auto; }
}
/* The back affordance's chevron is decorative; the gap keeps it off the word. */
.detail-back__link { gap: var(--s-6); }

/* ---------------------------------------------------------------------------
   Tag rail
--------------------------------------------------------------------------- */
.rail__label { padding: 0 var(--s-14) var(--s-9); }

.rail__list { display: flex; flex-direction: column; }

.rail__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-8);
  width: 100%;
  padding: var(--s-7) var(--s-14);
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 var(--t-12-5) / var(--lh-row) var(--font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.rail__item:hover { background: var(--hover-surface); color: var(--ink); }
.rail__count { font: 400 var(--t-11) / 1 var(--font-mono); color: var(--ink-55); }

.rail__item[aria-pressed='true'],
.rail__item[aria-current='true'] {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.rail__item[aria-pressed='true'] .rail__count,
.rail__item[aria-current='true'] .rail__count { color: inherit; }
.rail__item[aria-pressed='true']:hover,
.rail__item[aria-current='true']:hover { background: var(--fill-hover); color: var(--paper); }

.rail__divider {
  margin: var(--s-16) var(--s-14) var(--s-9);
  padding-top: var(--s-14);
  border-top: var(--rule-w) solid var(--rule);
}

.rail__schema {
  display: block;
  padding: var(--s-6) var(--s-14);
  font: 400 var(--t-12) / var(--lh-row) var(--font-mono);
  color: var(--ink);
  text-decoration: none;
}
.rail__schema:hover { background: var(--hover-surface); color: var(--ink); text-decoration: underline; }
.rail__schema[aria-current='page'] {
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--s-14) - 3px);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Filter bars
--------------------------------------------------------------------------- */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  padding: var(--s-10) var(--s-12);
  border-bottom: var(--rule-w) solid var(--rule);
  align-items: center;
}
.filterbar__spacer { margin-left: auto; }

/* The chip row that stands in for the rail once it is gone. */
.tagbar {
  display: flex;
  gap: var(--s-6);
  padding: var(--s-10) var(--s-12);
  border-bottom: var(--rule-w) solid var(--rule);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tagbar .chip { flex: none; }
@media (max-width: 48rem) {
  .tagbar .chip { min-height: var(--h-44); padding: var(--s-8) var(--s-12); font-size: var(--t-11); }
}

/* Search-first header (1b) */
.searchblock { padding: 0 var(--s-22) var(--s-16); border-bottom: var(--rule-w-strong) solid var(--rule-strong); }
.searchblock__meta { font: 400 var(--t-11-5) / 1.4 var(--font-mono); color: var(--ink-55); }
.searchblock__field {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  min-height: var(--h-46);
  padding: 0 var(--s-14);
  border: var(--rule-w-strong) solid var(--ink);
  background: var(--field-bg);
}
.searchblock__field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.searchblock__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: 400 var(--t-15) / 1.3 var(--font-mono);
  color: var(--ink);
}
.searchblock__field input:focus-visible { outline: none; }
.searchblock__status { font: 400 var(--t-11-5) / 1.3 var(--font-mono); color: var(--ink-55); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Folded columns

   Either navigation column can be folded away to give the detail the room,
   and with both folded the detail has the whole frame — which is all
   "maximise" is here. The column is removed from the grid rather than shrunk
   to a sliver: a strip carrying a second copy of the control that folded it
   would be two tab stops for one state, and the toggles that did it are in
   the top bar, on screen, saying which way round it is.

   Not below the phone breakpoint, where the list and the detail are already
   separate pages and folding the list away would leave nothing to navigate
   from. The flags are not written onto the shell there either; this is the
   belt to that braces.
--------------------------------------------------------------------------- */
@media (min-width: 48.0625rem) {
  .app--browse[data-rail='collapsed'] .shell { grid-template-columns: minmax(0, 1fr); }
  .app--browse[data-rail='collapsed'] .rail { display: none; }
  .app--browse[data-rail='collapsed'] .main { grid-column: 1 / -1; }

  .app--browse[data-list='collapsed'] .main { grid-template-columns: minmax(0, 1fr); }
  .app--browse[data-list='collapsed'] .pane--list { display: none; }
}

/* The two column toggles. State is said three ways and none of them is colour
   alone: `aria-expanded`, the caret's direction, and the fill. */
.toggles {
  display: flex;
  gap: var(--s-6);
  flex: none;
}
.btn--toggle {
  gap: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  letter-spacing: var(--ls-label);
}
.btn--toggle[aria-expanded='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn--toggle[aria-expanded='true']:hover { background: var(--fill-hover); color: var(--paper); }

/* ---------------------------------------------------------------------------
   Forced colours: fills stop conveying anything, so the state a fill was
   carrying has to be said with a border the system paints.
--------------------------------------------------------------------------- */
@media (forced-colors: active) {
  /* A pressed chip, a current rail item or an open column toggle all lose
     their fill, so each gains a ring instead. */
  .chip[aria-pressed='true'],
  .chip[aria-current='true'],
  .rail__item[aria-pressed='true'],
  .rail__item[aria-current='true'],
  .btn--toggle[aria-expanded='true'] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .rail__schema[aria-current='page'] { outline: 2px solid Highlight; outline-offset: -2px; }
}