/* The guide page: a manual in the documentation layout.

   The layout itself (the side navigation that follows the reader, the
   reading column, the chapters and their task headings, the dark band of
   the guard chapters) is the shared .docs primitive of styles.css, and the
   drawings are the kit's (mock.css). This file holds only what the guide
   needs beyond them: the hero's heading, the reading parts of a task (code
   in a sentence, a note, the tables of commands and keys, the Store row),
   and the few states the guide's scenes add to the kit, each with the
   reason it is here. No section sets its own padding: the tiers of
   styles.css do. */

/* ------------------------------------------------------------ the hero */

/* The page's name at the h1 size; the shared stylesheet sizes the h1 only
   inside the home page's hero */
.g-hero h1 {
  max-width: 12ch;
  font-size: var(--fs-h1);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* A lead keeps its shorter measure inside the reading row and the
   chapters, whose own rules set every paragraph to the prose measure */
.g-hero .lead,
.docs-sec .lead {
  max-width: var(--measure-lead);
}

/* Under the title on a narrow screen, a link down to the folded Contents,
   so the chapter list is one step from the top instead of below the whole
   introduction. From 1024px the contents stand beside the text, so the
   link has no job there. */
.g-to-toc {
  margin-top: var(--s4);
  font-size: var(--fs-meta);
}

@media (min-width: 1024px) {
  .g-to-toc {
    display: none;
  }
}

/* ------------------------------------------------------- the contents */

/* On a narrow screen the folded Contents lists the nineteen chapters
   only, so it opens one screen long instead of four; the tasks of each
   chapter follow its heading in the text. Beside the text, from 1024px,
   the full list stays. */
@media (max-width: 1023.98px) {
  .docs-nav ol ol {
    display: none;
  }
}

/* A keyboard reader passes the hundred-odd contents links in one step.
   The link stays out of sight until it has focus, as the page's own skip
   link does, and then stands at the top of the list. */
.g-skip-toc:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.g-skip-toc:focus {
  display: inline-block;
  margin-block: var(--s2);
  font-size: var(--fs-meta);
}

/* A drawing's full description lives in a hidden paragraph that its
   aria-describedby names, so a screen reader hears a short name first
   and the detail after it. A hidden element still gives its text when it
   is referenced that way. No display rule may bring it on screen. */
.g-draw-desc[hidden] {
  display: none !important;
}

/* The guard chapters stand on the dark band inside the guide's paper
   section, so the shared rule that gives a lead and a note the light
   inks on paper reaches them too and would set dark ink on the dark
   band. Inside a dark chapter they take the night inks. */
.docs-sec.night .lead {
  color: var(--night-body);
}

.docs-sec.night .note {
  color: var(--night-quiet);
}

/* ----------------------------------------------- the reading parts */

/* Commands, keys and file names inside a sentence: real code, so
   monospace, on a small light field that wraps rather than widening the
   column */
.docs-sec code {
  padding: 0.05em 0.35em;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.night .docs-sec code,
.docs-sec.night code {
  border-color: var(--night-line);
  background: var(--night-raised);
  color: var(--night-ink);
}

/* A note under a task: the same quiet line on a hairline as a limit, so
   the two read as the margin of the task, not as its steps */
.g-note {
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.night .g-note {
  border-top-color: var(--night-line);
  color: var(--night-quiet);
}

/* The install commands: one row per agent on hairlines, its name, the
   command and the check; three columns from 48em */
.g-cmds {
  max-width: none;
  border-top: 1px solid var(--line-strong);
}

.g-cmds > div {
  display: grid;
  gap: var(--s1) var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}

.g-cmds dt {
  font-weight: 600;
}

.g-cmds dd {
  margin: 0;
}

@media (min-width: 48em) {
  .g-cmds > div {
    grid-template-columns: 8.5rem minmax(0, 1fr) 11rem;
    align-items: baseline;
  }
}

/* A term and what it means: an agent and what Restricted mode does for
   it, a key and what it does */
.g-defs {
  max-width: var(--measure);
  border-top: 1px solid var(--line-strong);
}

.g-defs > div {
  display: grid;
  gap: 2px var(--s4);
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

.g-defs dt {
  font-weight: 600;
}

.g-defs dd {
  margin: 0;
}

@media (min-width: 30em) {
  .g-defs > div {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

.night .g-defs,
.night .g-cmds {
  border-top-color: var(--night-line-strong);
}

.night .g-defs > div,
.night .g-cmds > div {
  border-bottom-color: var(--night-line);
}

/* The Store button on paper, with the note beside it */
.g-store {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
}

.g-store-note {
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

/* The guide is one long page of about a hundred drawings, which hold most
   of its elements. A drawing's ground skips its layout and paint while it
   is far from the screen and keeps the size it last had, so the page is
   light to open and to scroll. Only the ground: the scene's controls and
   caption stay outside it, so a focus ring is never clipped and the
   follower and the scenes' own observers still see every part. The guard
   chapters draw their windows on the dark band with no ground, so there
   the window itself takes the rule. */
.docs-sec .plate,
.docs-sec .mock-scene > .mock-window {
  content-visibility: auto;
  contain-intrinsic-size: auto 34em;
}

/* ----------------------------------------- what the scenes add to the kit */

/* A part of the window a scene points at, the way a guided tour does: a
   neutral frame drawn inside the part, never amber, so it cannot read as
   an agent that waits */
.g-spot {
  border-radius: 6px;
  outline: 2px solid var(--m-ink);
  outline-offset: -4px;
}

/* The same frame round a small part of the top bar, drawn just outside it
   so it does not cover the part's own words */
.g-spot-s {
  border-radius: 4px;
  outline: 2px solid var(--m-ink);
  outline-offset: 3px;
}

/* The tour's mark 3 stands beside the Quick settings button, not on it,
   so the light mark never sits on the light button */
.g-tour .mock-rail-foot {
  align-items: center;
  gap: 0.5em;
}

/* A small control the scene presses: an icon, a badge, a link */
.g-press {
  border-radius: 3px;
  background: var(--m-select);
  outline: 1px solid var(--m-field-edge);
  outline-offset: 2px;
}

/* The pane that holds the keyboard. The app draws a thin ring in the
   profile's colour; an outline draws it without a shadow. */
.mock-pane.g-focus {
  outline: 1px solid var(--m-accent, var(--m-body));
  outline-offset: -1px;
}

/* A drawn button whose words are longer than the rail is wide wraps
   inside the rail, as the app's own link does, instead of running out of
   it */
.mock-btn.g-wrap {
  white-space: normal;
  text-align: left;
}

/* The profile editor's icon tiles: every tile on the one neutral ground of
   a selected row, so the drawing shows a grid of choices and no color
   stands for a profile */
.mock-swatch.g-tile {
  --m-accent: var(--m-select);
}

/* The backup panel is wider than the kit's dialog, as the app's is */
.mock-modal > .mock-dialog.g-dialog-wide {
  width: min(50em, 100%);
}

/* Text typed into a box that shows a gray hint while empty */
.g-typed {
  color: var(--m-ink);
}

/* The review panel's commit message box takes the room left beside its
   two buttons, as the app's does, so its width never follows what is
   typed in it and the row keeps its size while a scene types */
.mock-input.g-commit {
  flex: 1 1 10em;
  min-width: 0;
}

/* The second small dot after a profile's name marks a stored API key. The
   app draws it in its amber; on this site amber means only an agent that
   waits for you (and Drift), so the dot is drawn in the quiet ink. */
.mock-auth.g-key {
  background: var(--m-body);
}

/* The page's own mark for a key the reader presses, in the page's type, in
   the window's lower right, where it covers no part the scene is about */
.g-keycap {
  position: absolute;
  right: 0.8em;
  bottom: 0.8em;
  z-index: 3;
  padding: 0.15em 0.6em;
  border: 1px solid var(--m-field-edge);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--m-chrome);
  color: var(--m-ink);
  font-family: var(--sans);
  font-weight: 600;
  white-space: nowrap;
}

/* A group of top-bar parts a scene frames together */
.g-cluster {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.6em;
  padding: 0.15em 0.3em;
}

/* A pane drawn wider once its gutter has been dragged, and the gutter
   itself while it is held. As columns the gutter is the pane's right edge;
   on a narrow drawing the panes stack, so it is the lower edge. */
.mock-panes > .mock-pane.g-wide {
  flex-grow: 1.7;
}

.g-gutter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 3px;
  background: var(--m-ink);
}

@container mock (max-width: 39.999rem) {
  .g-gutter {
    top: auto;
    left: 0;
    width: auto;
    height: 3px;
  }
}

/* The rail folded to its lights, and hidden behind its handle: the app's
   collapsed and auto-hide modes, which Ctrl+B cycles. The kit draws the
   folded rail only where the drawing is narrow; a scene needs it at any
   width. */
.mock-window.g-rail-fold > .mock-rail {
  flex-basis: 3.2em;
}

.mock-window.g-rail-fold :is(.mock-rail-name, .mock-rail-sub, .mock-group, .mock-brand-name, .mock-rail-foot) {
  display: none;
}

.mock-window.g-rail-fold .mock-rail-item {
  grid-template-columns: auto;
  justify-content: center;
  padding-inline: 0;
}

.mock-window.g-rail-fold .mock-brand {
  justify-content: center;
  padding-inline: 0;
}

.mock-window.g-rail-hide > .mock-rail {
  flex-basis: 14px;
}

.mock-window.g-rail-hide > .mock-rail > * {
  visibility: hidden;
}

/* Heights. A scene that changes the panes' arrangement, or opens a panel
   over the window, keeps the panes at one height, so the drawing never
   changes size while it plays. On a narrow drawing the panes stack and a
   panel wraps more, so both are taller there. */
.mock-panes.g-h {
  height: 22em;
}

.mock-panes.g-h-tall {
  height: 27em;
}

.mock-panes.g-h-modal,
.mock-empty.g-h-modal {
  flex: none;
  height: 31em;
}

.mock-panes.g-h-first,
.mock-empty.g-h-first {
  flex: none;
  height: 22em;
}

@container mock (max-width: 39.999rem) {
  .mock-panes.g-h {
    height: 32em;
  }

  .mock-panes.g-h-tall {
    height: 38em;
  }

  .mock-panes.g-h-modal,
  .mock-empty.g-h-modal {
    height: 46em;
  }

  .mock-panes.g-h-first,
  .mock-empty.g-h-first {
    height: 30em;
  }
}

/* The last step of the Store install: MaeVae opened from the Start menu.
   The Start button is drawn as a plain frame, not as any company's logo,
   and the menu holds only the one entry the step needs, over the
   taskbar's left end, as the tray's menu stands over its right. */
.g-launch .mock-taskbar {
  position: relative;
}

.g-start {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--m-quiet);
  border-radius: 3px;
}

.g-start-menu {
  position: absolute;
  bottom: calc(100% + 0.6em);
  left: 0.6em;
  z-index: 3;
  display: grid;
  min-width: 12em;
  padding: 0.4em 0;
  border: 1px solid var(--m-edge);
  border-radius: var(--radius);
  background: var(--m-chrome);
  color: var(--m-ink);
}

.g-start-menu .mock-tray-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

/* A contrast theme replaces the colours that draw these marks, so each
   keeps a system colour of its own */
@media (forced-colors: active) {
  .g-spot,
  .g-spot-s,
  .g-press,
  .mock-pane.g-focus {
    outline-color: Highlight;
  }

  .g-gutter {
    forced-color-adjust: none;
    background: Highlight;
  }

  .mock-auth.g-key {
    forced-color-adjust: none;
    background: CanvasText;
  }
}