/* MaeVae: the features page. Loaded after /styles.css (the tokens, the
   grounds, the layout primitives and the documentation layout) and
   /mock.css (the drawing parts and the scene stepper's states). This file
   holds only what this page adds.

   The page is a reference, entered from its side navigation or read from
   top to bottom, so it uses the documentation layout: the groups are its
   chapters and their topics the navigation's second level. Restricted mode
   and Isolation, the two features the page puts first, are chapters on the
   dark band; every other group pairs its text with drawings in bands, on
   paper and strip in turn, so a long page keeps its seams without boxes. */

/* ------------------------------------------------------------ opening */

/* The page's name, a step under the home page's tagline: a reference page
   opens on its title and reaches its contents quickly */
.ft-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);         /* 36 to 60px */
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.028em;
}

/* ----------------------------------------------------------- the groups */

/* A group on the strip ground inside the reading column. Its ground runs
   from just left of the column to the screen's right edge, as the layout's
   dark chapters do, so the side navigation keeps its paper; main clips
   what lies past the screen. */
.docs-main > .docs-sec.strip {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.docs-main > .docs-sec.strip::before {
  content: "";
  position: absolute;
  inset: 0 -100vw;
  z-index: -1;
  background: var(--strip);
}

@media (min-width: 1024px) {
  .docs-main > .docs-sec.strip::before {
    left: calc(var(--pair-gap) / -2);
  }
}

/* Where the ground changes, the change itself is the seam, so the hairline
   the layout draws between two paper chapters is left out there */
.docs-main > .docs-sec + .docs-sec.strip,
.docs-main > .docs-sec:is(.strip, .night) + .docs-sec:not(.night) {
  border-top: 0;
}

/* The section round the layout already ends on the short section end; the
   last chapter adds none of its own, so the space before the closing band
   stays one top padding and one end */
.docs-main > .docs-sec:last-child {
  padding-bottom: 0;
}

/* The dark chapters stand inside the paper section that holds the layout,
   where the paper rules for a lead and a note would reach them too; on the
   dark band they keep the night inks */
.docs-main .night .lead {
  color: var(--night-body);
}

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

/* A lead keeps the lead's measure. The rules that hold the reading
   column's prose and the hero's text cell to 70ch name a paragraph by
   its parent and its element, which outranks the lead's own measure;
   naming the lead as a child of the same parts gives it back. */
.docs-sec > .lead,
.reading-body > .lead {
  max-width: var(--measure-lead);
}

/* Each pair of a group stands on a hairline, 48px under what comes before
   it; the first pair follows the group's lead without one */
.docs-sec > .band {
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.docs-sec > .lead + .band {
  padding-top: 0;
  border-top: 0;
}

.docs-sec > .limit {
  margin-top: var(--s7);
}

/* The way on from each group, under its limit: the guide's chapter on it
   and the FAQ's answers about it, so the three pages lead into each other */
.docs-sec > .ft-more {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}

.ft-more li {
  max-width: var(--measure);
  color: var(--quiet);
}

.night .ft-more li {
  color: var(--night-quiet);
}

/* A keyboard reader can pass the long contents list in one step: the link
   stays out of sight until it has focus */
.ft-skip-toc:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ft-skip-toc:focus {
  display: inline-block;
  margin-bottom: var(--s3);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* A band inside the reading column. From 1600px the layout takes the wide
   track, and the column holds the shared band as it stands: the text beside
   its drawing, the drawing over 600px wide on its plate. Under 1600px the
   column is 1056px or less, where a drawing beside its text would fall
   under 600px; there the band stacks, text first, and the drawing takes
   the column's whole width, as a drawing in a reading column does. */
@media (max-width: 1599.98px) {
  .docs-main .band {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-main .band > .band-text,
  .docs-main .band > .band-art,
  .docs-main .band.flip > .band-text,
  .docs-main .band.flip > .band-art {
    grid-column: 1;
    grid-row: auto;
  }
}

/* The topics in a band's text, and in the blocks under a chapter's
   drawing: a heading close to its text, a clear step before the next */
.docs-main .band-text > h3 + *,
.chapter-foot > h3 + * {
  margin-top: var(--s3);
}

.docs-main .band-text > * + h3,
.chapter-foot > * + h3 {
  margin-top: var(--s6);
}

.chapter-foot > * + *,
.band-foot > * + * {
  margin-top: var(--s4);
}

/* A band's foot row holds the topics that need no drawing of their own,
   in columns under the pair, so the text beside the drawing stays about
   as tall as the drawing and no cell of the pair stands half empty */
.band-foot > * + h3 {
  margin-top: var(--s6);
}

.chapter-foot > .cols,
.chapter-foot > .ft-badges {
  margin-top: var(--s5);
}

.chapter-foot > .mock-scene {
  margin-top: var(--s6);
}

.chapter-foot p,
.chapter-foot li {
  max-width: var(--measure);
}

/* The name over one cell of a row of columns (an agent, a face) */
.ft-cell-h {
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
}

.night .ft-cell-h {
  color: var(--night-ink);
}

.docs-main code {
  font-family: var(--mono);
  font-size: 0.92em;
}

.docs-main .night kbd {
  border-color: var(--night-line-strong);
  background: var(--night-raised);
  color: var(--night-ink);
}

/* Plain lists inside the text; the steps of a new profile are a real
   sequence, so they keep their numbers */
.ft-list,
.ft-steps {
  max-width: var(--measure);
  padding-left: 1.3em;
}

.ft-list li + li,
.ft-steps li + li {
  margin-top: var(--s2);
}

.ft-list li::marker,
.ft-steps li::marker {
  color: var(--quiet);
}

/* The four states of the Isolation badge, each drawn small beside its
   meaning: an inset, not an illustration, so it does not play */
.ft-badges {
  display: grid;
  gap: var(--s3);
  padding: 0;
  list-style: none;
}

.ft-badges li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s3);
}

.ft-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0.05em 0.55em;
  border: 1px solid var(--m-edge);
  border-radius: var(--radius-small);
  background: var(--m-chrome);
  font-family: var(--sans);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* ------------------------------------------- what each agent reports */

/* A table across the column, its header row on the strip ground. On a
   narrower screen each agent becomes a block: its name, then its four
   answers, each with its column's name above it. Some browsers drop a
   table's meaning once its parts stop displaying as table parts, so the
   markup states the table, row, header and cell roles itself. */
.ft-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ft-vendors {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.ft-vendors th,
.ft-vendors td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.ft-vendors thead th {
  border-bottom-color: var(--line-strong);
  background: var(--strip);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
}

.ft-vendors tbody th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* What an agent does not report reads quieter than what it does */
.ft-vendors .ft-na {
  color: var(--quiet);
}

.ft-k {
  display: none;
}

@media (max-width: 899.98px) {
  .ft-vendors,
  .ft-vendors tbody,
  .ft-vendors tr,
  .ft-vendors th,
  .ft-vendors td {
    display: block;
  }

  .ft-vendors thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ft-vendors tbody tr {
    display: grid;
    gap: var(--s3) var(--s5);
    padding-block: var(--s4);
    border-bottom: 1px solid var(--line-strong);
  }

  .ft-vendors tbody th,
  .ft-vendors tbody td {
    padding: 0;
    border-bottom: 0;
  }

  .ft-k {
    display: block;
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.4;
  }
}

@media (min-width: 560px) and (max-width: 899.98px) {
  .ft-vendors tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ft-vendors tbody th {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------- coming next */

/* The one dashed frame on the page, so the two items read as not in the
   app yet; the words inside say so plainly */
.ft-next {
  margin-top: var(--s5);
  padding: var(--s5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}

/* The state of a planned item, after its name in a plain frame: not
   amber, since nothing here is waiting for the reader */
.ft-state {
  justify-self: start;
  width: fit-content;
  padding: 0 0.5em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.6;
}

/* ------------------------------------------------------------- closing */

.ft-read {
  display: grid;
  gap: var(--s3);
  padding: 0;
  list-style: none;
}

.ft-read li {
  max-width: 60ch;
  color: var(--night-body);
}

.ft-closing .chapter-art > * + * {
  margin-top: var(--s5);
}

/* -------------------------------------------------------- the drawings */

/* The windows with a panel over them: the panes are set at least as tall
   as the panel, and taller on a narrow drawing, where the panel wraps to
   more lines; the panel never grows past the window. The same holds for
   the scenes in which panes come, go or change their layout, so the
   drawing keeps its size through the scene. */
.ft-h-wiz1 { --m-panes-h: 24em; }
.ft-h-wiz3 { --m-panes-h: 38em; }
.ft-h-dash { --m-panes-h: 22em; }
.ft-h-pal { --m-panes-h: 23em; }
.ft-h-bak { --m-panes-h: 32em; }
.ft-h-open { --m-panes-h: 17em; }
.ft-h-approve { --m-panes-h: 17em; }

@container mock (max-width: 49.999rem) {
  .ft-h-open { --m-panes-h: 30em; }
}

@container mock (max-width: 39.999rem) {
  .ft-h-wiz1 { --m-panes-h: 31em; }
  .ft-h-wiz3 { --m-panes-h: 56em; }
  .ft-h-bak { --m-panes-h: 46em; }
  .ft-h-approve { --m-panes-h: 27em; }
}

@container mock-root (min-width: 47.5rem) {
  .ft-h-pal { --m-panes-h: 30em; }
}

/* The app's backup panel is 760px wide, wider than New profile */
.mock-modal > .mock-dialog.ft-w-backup {
  width: min(50em, 100%);
}

/* A part that keeps its room in every frame but is seen only while a
   scene holds it on (ft-on): the Show all button while a pane fills the
   window, the Stop button while an update runs. Keeping the room means
   the drawing never changes size when the part comes and goes. */
.ft-ghost {
  visibility: hidden;
}

.ft-ghost.ft-on {
  visibility: visible;
}

/* A control pressed for one step of a scene, where the shared buttons do
   not reach (an icon, a link-like button) */
.ft-pressed {
  background: var(--m-select);
}

/* A figure picked out for a step, so the eye finds it: a neutral frame,
   like the marked report row in mock.css */
.ft-flag {
  outline: 1px solid var(--m-field-edge);
  outline-offset: 0.2em;
  border-radius: 2px;
}

/* The new-profile steps: the hint under the agent list when its tool is
   not on the PATH */
.ft-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.6em;
  color: var(--m-body);
}

/* The layouts scene shows columns, rows and the grid at every width, so
   the change can be seen on a phone too, and holds the panes' height
   through every change */
.ft-layouts .mock-panes {
  --m-panes-h: 20em;
}

@container mock (max-width: 39.999rem) {
  .ft-layouts .mock-panes {
    --m-panes-h: 27em;
  }
}

.ft-layouts .mock-panes:not(.is-rows):not(.is-grid) {
  flex-direction: row;
}

.ft-layouts .mock-panes:not(.is-rows):not(.is-grid) > .mock-pane {
  flex-basis: 0;
}

.ft-layouts .mock-panes.is-grid {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ft-layouts .mock-panes.is-grid > .mock-pane:last-child:nth-child(odd) {
  grid-column: span 2;
}

.ft-layouts .mock-panes.is-filled.is-grid > .mock-pane.is-shown {
  grid-column: 1 / -1;
}

/* The Broadcast scene needs its box at every width */
.ft-bcast .mock-broadcast {
  display: inline-block;
}

.ft-typed {
  color: var(--m-ink);
}

/* The account switcher: the saved logins, one row each */
.ft-acct-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em 0.6em;
  color: var(--m-ink);
  font-weight: 600;
}

.ft-acct-in {
  color: var(--m-quiet);
  font-weight: 400;
}

.ft-slots {
  display: grid;
  gap: 0.35em;
}

.ft-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.6em;
  border: 1px solid var(--m-split);
  border-radius: 4px;
}

.ft-acct-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--m-faint);
}

.ft-acct-dot.is-on {
  background: var(--m-ok);
}

.ft-slot-name {
  min-width: 0;
  overflow: hidden;
  color: var(--m-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The app's link-like buttons: underlined words, as links are */
.ft-link {
  padding: 0 0.2em;
  border-radius: 3px;
  color: var(--m-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

/* A long button label wraps on a narrow drawing instead of pushing the
   drawing past the screen's edge */
.ft-wrap {
  white-space: normal;
  text-align: left;
}

/* The Windows Terminal scene: the profile editor beside a drawn Windows
   Terminal window with its new-tab menu. Windows Terminal is Microsoft's
   app; it is drawn plainly, with the parts the story needs. */
.ft-two {
  display: grid;
  gap: 1em;
  align-items: stretch;
}

@container mock (min-width: 40rem) {
  .ft-two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.ft-wt {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--m-edge);
  border-radius: var(--radius);
  background: var(--m-term);
}

.ft-wt-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
  padding: 0.45em 0.6em 0;
  background: var(--m-rail);
}

.ft-wt-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
  padding: 0.35em 0.8em;
  border-radius: 6px 6px 0 0;
  background: var(--m-term);
  color: var(--m-ink);
  white-space: nowrap;
}

/* The new-tab button and its menu arrow, drawn with strokes */
.ft-wt-plus,
.ft-wt-down {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.6em;
  height: 1.6em;
  margin-bottom: 0.2em;
  color: var(--m-quiet);
}

.ft-wt-plus::before,
.ft-wt-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7em;
  border-top: 1.5px solid currentColor;
  transform: translate(-50%, -50%);
}

.ft-wt-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ft-wt-down {
  border-radius: 3px;
  background: var(--m-select);
  color: var(--m-ink);
}

.ft-wt-down::before {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.ft-wt-body {
  flex: 1 1 auto;
  min-height: 12em;
  padding: 0.6em;
}

.ft-wt-menu {
  display: grid;
  width: min(15em, 100%);
  padding: 0.3em 0;
  border: 1px solid var(--m-edge);
  border-radius: var(--radius);
  background: var(--m-chrome);
}

.ft-wt-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  padding: 0.35em 0.9em;
  white-space: nowrap;
}

.ft-wt-item.is-sel {
  background: var(--m-select);
}

.ft-wt-ico {
  display: inline-block;
  flex: none;
  width: 0.9em;
  height: 0.9em;
  border: 1.5px solid var(--m-quiet);
  border-radius: 2px;
}

/* A profile's tab carries the icon picked for it; drawn in its colour */
.ft-wt-ico.is-profile {
  border-color: var(--m-accent, var(--m-body));
  background: var(--m-accent, var(--m-body));
}

/* Backup: the folder box with its button, and the progress line */
.ft-dest {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.ft-dest .mock-input {
  flex: 1 1 auto;
  min-width: 0;
}

.ft-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.8em;
  padding: 0.55em 0.8em;
  border-top: 1px solid var(--m-split);
  color: var(--m-body);
}

.ft-progress .mock-bar {
  width: 8em;
}

/* A disabled main action, as the backup's while it runs. The shared
   greying dims a button's words, which on the main action's light field
   would leave its label hard to read; here the field itself is greyed and
   the label stays clear. */
.mock-btn.is-primary.is-disabled {
  border-color: var(--m-faint);
  background: var(--m-faint);
  color: var(--night);
}

/* Local models: the list that List models fetches */
.ft-models {
  display: grid;
  gap: 0.45em;
}

.ft-models .mock-row-btns {
  align-items: center;
}

.ft-search {
  flex: 1 1 7em;
  min-width: 0;
}

.ft-model-list {
  display: grid;
  padding: 0.2em 0;
  border: 1px solid var(--m-field-edge);
  border-radius: 4px;
  background: var(--m-field);
}

.ft-model {
  padding: 0.2em 0.6em;
  color: var(--m-body);
  font-family: var(--mono);
}

.ft-model.is-sel {
  background: var(--m-select);
  color: var(--m-ink);
}

/* The custom swatch, drawn as the app draws it: an empty square with a
   plus */
.ft-swatch-custom {
  position: relative;
  border-style: dashed;
  border-color: var(--m-field-edge);
  background: transparent;
}

.ft-swatch-custom::before,
.ft-swatch-custom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6em;
  border-top: 1.5px solid var(--m-quiet);
  transform: translate(-50%, -50%);
}

.ft-swatch-custom::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.ft-num {
  text-align: right;
}

/* Windows contrast themes replace backgrounds, which would erase this
   page's own dots, frames, the chosen rows and the strip's ground; real
   borders and system colours keep them */
@media (forced-colors: active) {
  .ft-acct-dot,
  .ft-wt-ico.is-profile {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }

  .ft-chip,
  .ft-wt,
  .ft-wt-menu,
  .ft-model-list,
  .ft-slot,
  .ft-next {
    border-color: CanvasText;
  }

  .ft-model.is-sel,
  .ft-wt-item.is-sel,
  .ft-pressed {
    outline: 1px solid Highlight;
  }

  .ft-flag {
    outline-color: Highlight;
  }

  .docs-main > .docs-sec.strip::before {
    display: none;
  }

  .docs-main > .docs-sec.strip {
    border-top: 1px solid CanvasText;
  }
}