/* ---------------------------------------------------------------------------
   base.css — PHASE 1. Structure, layout, spacing, responsiveness, focus.

   NO font families. NO colours. NO backgrounds. NO shadows, radii or
   transitions. Those are theme.css, phase 2.

   Borders here are written as `1px solid` with no colour, so they inherit
   currentColor. That gives a legible wireframe boundary with no palette, and
   phase 2 recolours them by setting a border-color and nothing else.

   Everything uses LOGICAL properties (inline-start / inline-end, not left /
   right) so `dir="rtl"` mirrors the whole layout for Arabic for free.
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;

  --measure: 90ch;
  --sidebar-width: 17rem;
  --rail-width: 14rem;
  --tap-target: 2.75rem;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  line-height: 1.6;
}

img, svg, video { max-width: 100%; height: auto; }

/* --- skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-2xs);
  inset-block-start: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* --- app shell ----------------------------------------------------------- */

.app {
  display: grid;
  grid-template-areas: "header" "nav" "main";
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

.app__header { grid-area: header; position: sticky; top: 0; z-index: 100; }
.app__nav    { grid-area: nav; }
.app__main   { grid-area: main; min-width: 0; padding: var(--space-m); }
.app__rail   { grid-area: rail; display: none; }

/* Mobile: nav is a fixed drawer that slides in from the side. */
@media (max-width: 47.99em) {
  /* Override [hidden]'s display:none so the transform transition plays. */
  .app__nav {
    display: block !important;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 50;
    width: min(85vw, 22rem);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      visibility 0s linear 0.3s;
  }
  .app__nav:not([hidden]) {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      visibility 0s linear 0s;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .nav-backdrop--open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Tablet and up: persistent sidebar, collapsible via .app--nav-collapsed. */
@media (min-width: 48em) {
  .app {
    grid-template-areas: "header header" "nav main";
    grid-template-columns: auto minmax(0, 1fr); /* auto tracks .app__nav width */
  }
  .app--home {
    grid-template-areas: "header" "main";
    grid-template-columns: minmax(0, 1fr);
  }
  .app__nav {
    width: var(--sidebar-width);
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .app--nav-collapsed .app__nav {
    width: 0;
    overflow: hidden;
    padding: 0;
    border-inline-end: 0;
  }
  .app__nav[hidden] { display: block; }
  .app__main { padding: var(--space-l); }
}

/* Wide: right rail appears. */
@media (min-width: 75em) {
  .app {
    grid-template-areas: "header header header" "nav main rail";
    grid-template-columns: auto minmax(0, 1fr) var(--rail-width);
  }
  .app--home {
    grid-template-areas: "header" "main";
    grid-template-columns: minmax(0, 1fr);
  }
  .app__rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h, 4.5rem) + var(--space-s));
    align-self: start;
    padding: var(--space-m) var(--space-s);
    max-height: calc(100vh - var(--header-h, 4.5rem) - var(--space-m));
    overflow-y: auto;
  }
}

/* --- header and search --------------------------------------------------- */

.masthead {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-block-end: 1px solid;
}

.masthead__bar {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-s);
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
}

.masthead__logo {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.masthead__title {
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 48em) {
  .masthead { flex-direction: row; align-items: center; }
  .masthead__bar { flex: 0 0 auto; width: auto; }
  .search { flex: 1 1 auto; max-width: 36rem; }
  .lang-switch { margin-inline-start: 0; }
}

/* The nav toggle only exists below the sidebar breakpoint. */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: var(--space-2xs);
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
@media (min-width: 48em) { .nav-toggle { display: none; } } /* mobile only */

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.2s;
}

.lang-switch { margin-inline-start: auto; }
.lang-switch select { font: inherit; min-height: var(--tap-target); }

/* Search sits centred under the bar, full width on mobile. */
.search {
  position: relative;
  width: 100%;
  max-width: 40rem;
}

.search__input {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid;
  background: none;
  font: inherit;
  color: inherit;
}

.search__results {
  position: absolute;
  inset-inline: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid;
  border-block-start: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.search__result { border-block-end: 1px solid; }
.search__result:last-child { border-block-end: 0; }

.search__result a {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  min-height: var(--tap-target);
  color: inherit;
}

.search__result-title { font-weight: 600; }
.search__crumb::before { content: " · "; }

.search__status { padding: var(--space-2xs) var(--space-xs); }
.search__empty  { padding: var(--space-xs); }

/* --- chapter navigation -------------------------------------------------- */

.app__nav {
  padding: var(--space-s);
  border-block-end: 1px solid;
}

@media (min-width: 48em) {
  .app__nav {
    border-block-end: 0;
    border-inline-end: 1px solid;
    position: sticky;
    top: var(--header-h, 4.5rem);
    align-self: start;
    max-height: calc(100vh - var(--header-h, 4.5rem));
    overflow-y: auto;
  }
}

/* Details/summary collapsible chapters */
.nav-chapter {
  border: 0;
  padding: 0;
}

.nav-chapter summary {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.nav-chapter summary::-webkit-details-marker { display: none; }
.nav-chapter summary::marker { display: none; }

/* Custom disclosure chevron */
.nav-chapter summary::after {
  content: '▸';
  margin-inline-start: auto;
  font-size: 0.7em;
  opacity: 0.6;
}
.nav-chapter[open] summary::after { content: '▾'; }

.nav-chapter__list {
  margin: 0;
  padding: 0;
  padding-inline-start: var(--space-xs);
  list-style: none;
}

.nav-chapter__list li { margin-block: var(--space-3xs); }

/* Group dividers within a chapter */
.nav-group { list-style: none; }
.nav-group__label {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  font-weight: 600;
}
.nav-group__list {
  margin: 0;
  padding: 0;
  padding-inline-start: var(--space-2xs);
  list-style: none;
}

.nav-link {
  display: block;
  padding: var(--space-3xs) var(--space-xs);
  border-inline-start: 2px solid transparent;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-link:hover { text-decoration: underline; }

/* --- page content -------------------------------------------------------- */

.page { display: flex; flex-direction: column; gap: var(--space-m); }
.page > * { max-width: var(--measure); }

.page__content { display: flex; flex-direction: column; gap: var(--space-m); }

.breadcrumb { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-3xs); }

.page h1, .page h2, .page h3 { margin: 0; }
.page p, .page ul, .page ol { margin: 0; }
.page ul, .page ol { padding-inline-start: var(--space-m); display: flex; flex-direction: column; gap: var(--space-3xs); }

.callout { padding: var(--space-s); border: 1px solid; }

/* Tables must scroll inside their own container, never the page body. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll table { border-collapse: collapse; width: 100%; }
.table-scroll th, .table-scroll td { border: 1px solid; padding: var(--space-2xs) var(--space-xs); text-align: start; }

.page__meta { display: flex; flex-wrap: wrap; gap: var(--space-s); border-block-start: 1px solid; padding-block-start: var(--space-s); }

/* --- home page chapter directory ----------------------------------------- */

.chapter-section { display: flex; flex-direction: column; gap: var(--space-2xs); }
.chapter-section__title { margin: 0; }
.chapter-section__pages { list-style: none; margin: 0; padding: 0; }
.chapter-section__pages li { margin-block: 0; }
.chapter-page-link { display: block; padding: var(--space-3xs) var(--space-xs); color: inherit; text-decoration: none; }
.chapter-page-link:hover { text-decoration: underline; }

/* --- useful resources ---------------------------------------------------- */

.resource-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-s);
  border: 1px solid;
  border-inline-start-width: 4px;
}

.resource-item__name { margin: 0; }
.resource-item__desc { margin: 0; }

/* --- page version / timestamp -------------------------------------------- */

.page-version { margin: 0; }

/* --- page kicker (chapter / group above h1) ------------------------------ */

.page-kicker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
}

.page-kicker__chapter {
  font-weight: 700;
  line-height: 1.2;
}

.page-kicker__group {
  font-size: 0.9em;
  line-height: 1.2;
}

/* --- page prev/next navigation ------------------------------------------- */

.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-s);
  border-block-start: 1px solid;
  padding-block-start: var(--space-m);
  margin-block-start: var(--space-m);
}

.page-nav__prev,
.page-nav__next {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid;
  color: inherit;
  text-decoration: none;
  min-height: var(--tap-target);
  max-width: 45%;
}

.page-nav__prev { margin-inline-end: auto; }
.page-nav__next { margin-inline-start: auto; text-align: end; flex-direction: row-reverse; }

.page-nav__prev:hover,
.page-nav__next:hover { text-decoration: underline; }

.page-nav__spacer { flex: 1; }

.page-nav__label { flex-shrink: 0; }

/* --- footer -------------------------------------------------------------- */

.site-footer {
  border-block-start: 1px solid;
  padding: var(--space-l) var(--space-m);
}

.site-footer__inner {
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* --- section rail -------------------------------------------------------- */

.rail-list, .rail-list ul { margin: 0; padding: 0; list-style: none; }
.rail-list a { display: block; padding-block: var(--space-3xs); color: inherit; }

/* --- accessibility ------------------------------------------------------- */

:focus-visible { outline: 2px solid; outline-offset: 2px; }

.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

mark { background: none; font-weight: 700; text-decoration: underline; }

/* --- desktop sidebar rail toggle ----------------------------------------- */

.nav-rail-toggle { display: none; }

@media (min-width: 48em) {
  .nav-rail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset-inline-start: calc(var(--sidebar-width) - 1px); /* overlap nav's right border so they merge into one line */
    top: var(--header-h, 4.5rem);
    z-index: 110;
    min-width: 1.25rem;
    min-height: 3rem;
    padding: 0 var(--space-3xs);
    border: 1px solid;
    background: none;
    cursor: pointer;
    transition: inset-inline-start 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .app--nav-collapsed .nav-rail-toggle {
    inset-inline-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}