@font-face {
    font-family: IBM Plex Sans;
    src: url(/fonts/plex-sans-var.woff2) format("woff2");
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: IBM Plex Sans;
    src: url(/fonts/plex-sans-italic-var.woff2) format("woff2");
    font-weight: 100 700;
    font-style: italic;
    font-display: swap;
  }

:root {
--hf-black: #000000;
  --hf-white: #ffffff;
  --hf-gray-95: #f4f4f4;
  --hf-gray-88: #e0e0e0;
  --hf-gray-78: #c6c6c6;
  --hf-gray-62: #a8a8a8;
  --hf-gray-48: #8d8d8d;
  --hf-gray-35: #6f6f6f;
  --hf-gray-24: #525252;
  --hf-gray-15: #393939;
  --hf-gray-08: #1c1c1c;

  --hf-font-sans: IBM Plex Sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --hf-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;

  --hf-size-1: 0.6875rem;
  --hf-size-2: 0.75rem;
  --hf-size-3: 0.8125rem;
  --hf-size-4: 0.875rem;
  --hf-size-5: 1rem;
  --hf-size-6: 1.125rem;
  --hf-size-7: 1.375rem;
  --hf-size-8: 1.75rem;
  --hf-size-9: 2.25rem;

  --hf-weight-400: 400;
  --hf-weight-500: 500;
  --hf-weight-600: 600;
  --hf-weight-700: 700;

  --hf-leading-1: 1.1;
  --hf-leading-2: 1.25;
  --hf-leading-3: 1.4;
  --hf-leading-4: 1.6;

  --hf-track-tight: -0.02em;
  --hf-track-none: 0em;
  --hf-track-wide: 0.14em;
  --hf-underline-offset: 0.2em;

  --hf-space-1: 0.25rem;
  --hf-space-2: 0.5rem;
  --hf-space-3: 0.75rem;
  --hf-space-4: 1rem;
  --hf-space-5: 1.5rem;
  --hf-space-6: 2rem;
  --hf-space-7: 3rem;
  --hf-space-8: 4rem;

  --hf-rule-1: 1px;
  --hf-rule-2: 2px;

  --hf-measure-prose: 58ch;
  --hf-measure-page: 64rem;
  --hf-measure-rail: 13rem;

--color-surface: var(--hf-white);
  --color-on-surface: var(--hf-black);
  --color-muted: var(--hf-gray-35);
  --color-faint: var(--hf-gray-48);
  --color-border: var(--hf-gray-78);
  --color-border-strong: var(--hf-black);
  --color-recessed: var(--hf-gray-95);

  --color-surface-inverse: var(--hf-black);
  --color-on-surface-inverse: var(--hf-white);
  --color-muted-inverse: var(--hf-gray-62);
  --color-border-inverse: var(--hf-gray-24);
  --color-recessed-inverse: var(--hf-gray-08);

  --color-seam: var(--hf-black);

  --color-control-surface: var(--hf-black);
  --color-on-control: var(--hf-white);
  --color-field-surface: var(--hf-white);
  --color-field-border: var(--hf-gray-48);
  --color-focus: var(--hf-black);

  --text-h1-family: var(--hf-font-sans);
  --text-h1-size: var(--hf-size-8);
  --text-h1-weight: var(--hf-weight-600);
  --text-h1-leading: var(--hf-leading-1);
  --text-h1-track: var(--hf-track-tight);

  --text-h2-family: var(--hf-font-sans);
  --text-h2-size: var(--hf-size-7);
  --text-h2-weight: var(--hf-weight-600);
  --text-h2-leading: var(--hf-leading-2);
  --text-h2-track: var(--hf-track-tight);

  --text-h3-family: var(--hf-font-sans);
  --text-h3-size: var(--hf-size-6);
  --text-h3-weight: var(--hf-weight-600);
  --text-h3-leading: var(--hf-leading-2);
  --text-h3-track: var(--hf-track-none);

  --text-body-family: var(--hf-font-sans);
  --text-body-size: var(--hf-size-5);
  --text-body-weight: var(--hf-weight-400);
  --text-body-leading: var(--hf-leading-4);
  --text-body-track: var(--hf-track-none);

  --text-label-family: var(--hf-font-sans);
  --text-label-size: var(--hf-size-1);
  --text-label-weight: var(--hf-weight-600);
  --text-label-leading: var(--hf-leading-3);
  --text-label-track: var(--hf-track-wide);

  --text-hint-family: var(--hf-font-sans);
  --text-hint-size: var(--hf-size-4);
  --text-hint-weight: var(--hf-weight-400);
  --text-hint-leading: var(--hf-leading-3);
  --text-hint-track: var(--hf-track-none);

  --text-meta-family: var(--hf-font-sans);
  --text-meta-size: var(--hf-size-3);
  --text-meta-weight: var(--hf-weight-500);
  --text-meta-leading: var(--hf-leading-3);
  --text-meta-track: var(--hf-track-none);

  --text-code-family: var(--hf-font-mono);
  --text-code-size: var(--hf-size-4);
  --text-code-weight: var(--hf-weight-400);
  --text-code-leading: var(--hf-leading-3);
  --text-code-track: var(--hf-track-none);

  --text-control-family: var(--hf-font-sans);
  --text-control-size: var(--hf-size-4);
  --text-control-weight: var(--hf-weight-600);
  --text-control-leading: var(--hf-leading-3);
  --text-control-track: var(--hf-track-none);

  --space-page: var(--hf-space-6);
  --space-section: var(--hf-space-6);
  --space-block: var(--hf-space-4);
  --space-tight: var(--hf-space-2);
  --space-hair: var(--hf-space-1);
  --space-inset: var(--hf-space-3);
  --space-inset-lg: var(--hf-space-5);
  --space-tabbar: var(--hf-space-8);

  --seam-width: var(--hf-rule-2);
  --border-width: var(--hf-rule-1);
  --measure-prose: var(--hf-measure-prose);
  --measure-page: var(--hf-measure-page);
  --rail-width: var(--hf-measure-rail);
  --underline-offset: var(--hf-underline-offset);
}

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

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

  body {
    background: var(--color-surface);
    color: var(--color-on-surface);
    font-family: var(--text-body-family);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-leading);
    margin: 0;
  }

  h1, h2, h3, p, ul, ol, dl, figure, pre, fieldset { margin: 0; }
  ul, ol { padding: 0; }
  fieldset { border: 0; padding: 0; min-width: 0; }

  a { color: inherit; text-underline-offset: var(--underline-offset); }

  /*
   * Emphasis inside a line, pinned to a role rather than left to the browser.
   *
   * A bold run in the middle of a sentence is how an inline label is written
   * (the draft page's Purpose line is the one in the product), and the weight
   * it takes should be the same weight every other label takes.
   */
  strong, b { font-weight: var(--text-label-weight); }

  h1 {
    font-family: var(--text-h1-family);
    font-size: var(--text-h1-size);
    font-weight: var(--text-h1-weight);
    line-height: var(--text-h1-leading);
    letter-spacing: var(--text-h1-track);
  }

  h2 {
    font-family: var(--text-h2-family);
    font-size: var(--text-h2-size);
    font-weight: var(--text-h2-weight);
    line-height: var(--text-h2-leading);
    letter-spacing: var(--text-h2-track);
  }

  h3 {
    font-family: var(--text-h3-family);
    font-size: var(--text-h3-size);
    font-weight: var(--text-h3-weight);
    line-height: var(--text-h3-leading);
    letter-spacing: var(--text-h3-track);
  }

  code, pre, samp, kbd {
    font-family: var(--text-code-family);
    font-size: var(--text-code-size);
    font-weight: var(--text-code-weight);
    letter-spacing: var(--text-code-track);
  }

  /*
   * A heading that IS an address is still a heading.
   *
   * Several surfaces lead with something monospaced: a Vault's own page is
   * titled by its compound address, because the address is the thing the page
   * is about. Taking the code role whole there shrank the title to body size
   * and made the most important line on the page the quietest one. The family
   * is the part that carries the meaning (this is an address, read it
   * literally), so the family survives and the size, weight, and tracking come
   * from the heading the code sits in.
   */
  h1 code, h2 code, h3 code {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
  }

  :focus-visible {
    outline: var(--seam-width) solid var(--color-focus);
    outline-offset: var(--space-hair);
  }


  .prose { max-width: var(--measure-prose); }
  .prose + .prose { margin-top: var(--space-block); }

  .label {
    font-family: var(--text-label-family);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    line-height: var(--text-label-leading);
    letter-spacing: var(--text-label-track);
    text-transform: uppercase;
    color: var(--color-faint);
    margin-bottom: var(--space-tight);
  }

  .hint {
    font-family: var(--text-hint-family);
    font-size: var(--text-hint-size);
    line-height: var(--text-hint-leading);
    color: var(--color-muted);
    max-width: var(--measure-prose);
  }

  .meta {
    font-family: var(--text-meta-family);
    font-size: var(--text-meta-size);
    font-weight: var(--text-meta-weight);
    line-height: var(--text-meta-leading);
    color: var(--color-faint);
  }

  /*
   * The question somebody asked, which is the loudest thing on the side it sits
   * on.
   *
   * It carries the heading's size and leading and the body's weight, which is
   * the point: it is prose the reader has to read rather than a title they scan
   * past, and it is first in priority on its half without a label above it
   * naming it. What sits under it (the purpose, then the moment) steps down
   * from here, so the order is readable before a word of it is.
   */
  .question {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-leading);
    max-width: var(--measure-prose);
  }


  .plain-list { list-style: none; }

  .pairs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-tight) var(--space-inset-lg);
  }

  .pairs dt {
    font-family: var(--text-label-family);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-track);
    text-transform: uppercase;
    color: var(--color-faint);
  }

  .pairs dd { margin: 0; }


  label { display: block; margin-bottom: var(--space-tight); }

  input, textarea, select {
    font: inherit;
    color: var(--color-on-surface);
    background: var(--color-field-surface);
    border: var(--border-width) solid var(--color-field-border);
    padding: var(--space-tight);
    width: 100%;
    max-width: var(--measure-prose);
  }

  input[type=radio], input[type=checkbox] { width: auto; }

  button {
    font-family: var(--text-control-family);
    font-size: var(--text-control-size);
    font-weight: var(--text-control-weight);
    line-height: var(--text-control-leading);
    letter-spacing: var(--text-control-track);
    background: var(--color-control-surface);
    color: var(--color-on-control);
    border: var(--border-width) solid var(--color-control-surface);
    padding: var(--space-tight) var(--space-inset-lg);
    cursor: pointer;
  }

  button.quiet {
    background: transparent;
    color: var(--color-on-surface);
    border-color: var(--color-border-strong);
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    align-items: center;
    margin-top: var(--space-block);
  }

  /*
   * A form's own rhythm, on the same principle the content regions use: it is a
   * property of adjacency rather than of a class somebody has to remember.
   *
   * The base reset zeroes the margins browsers put on paragraphs and fieldsets,
   * which left every form on every surface with its hint touching its field and
   * its button touching its hint, and left the two radio options on the account
   * surface touching each other. Groupings are separated by a block, the things
   * inside one grouping more tightly, and a label's own bottom margin collapses
   * into its field's top margin so a labelled field is one gap and not two.
   */
  form > * + * { margin-top: var(--space-block); }
  fieldset > * + * { margin-top: var(--space-tight); }

  /*
   * One field, its label, and whatever is said about it.
   *
   * A fieldset groups controls that belong together, and a form asking for one
   * thing has no group to make. Reached for anyway, it forced a legend on top of
   * a label, so several surfaces named the same field twice in a row under a
   * heading that had already named it a third time. This is the grouping those
   * forms actually wanted: the same internal rhythm, no second name.
   */
  .field > * + * { margin-top: var(--space-tight); }

  /*
   * One option in a set, with the sentence about what it does under it.
   *
   * Two options written as two paragraphs made a reader read both of them to
   * find the handful of words that differ. So each option names itself in the
   * words somebody scans for, and what it does to a submitted draft sits under
   * that name as its subtitle. Nothing is cut: the sentence is the same
   * sentence, one line lower.
   *
   * The whole thing is the label, subtitle included, so the target a reader can
   * press is the option and not just its first two words.
   *
   * Laid out as a grid rather than as inline runs, because the note has to
   * align under the name and not under the control: an option indented to its
   * own text edge is one thing on the page, and one wrapping to the margin is
   * two.
   */
  .option {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-tight);
    align-items: baseline;
    margin-bottom: 0;
  }

  .option-label { font-weight: var(--text-control-weight); }

  .option-note {
    grid-column: 2;
    font-family: var(--text-hint-family);
    font-size: var(--text-hint-size);
    line-height: var(--text-hint-leading);
    color: var(--color-muted);
    margin-top: var(--space-hair);
    max-width: var(--measure-prose);
  }

  .option + .option { margin-top: var(--space-block); }

  /*
   * A line that is there for whoever is looking for it, and quiet for everybody
   * else.
   *
   * The one use is the way out of the account. It is a real act with a real
   * confirmation behind it and it must be reachable without hunting; it is also
   * the last thing anybody came to this surface to do, and it had been the
   * loudest thing on it, bounded and headed like the section it sat in.
   */
  .quiet-line {
    font-family: var(--text-hint-family);
    font-size: var(--text-hint-size);
    line-height: var(--text-hint-leading);
    color: var(--color-faint);
  }


  .back-nav a {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-hair);
    font-family: var(--text-hint-family);
    font-size: var(--text-hint-size);
    font-weight: var(--text-control-weight);
    color: var(--color-muted);
    text-decoration: none;
  }

  .back-nav a:hover, .back-nav a:focus-visible { color: var(--color-on-surface); }


  .panel {
    border: var(--border-width) solid var(--color-border);
    padding: var(--space-inset-lg);
  }

  /*
   * Anything a reader is meant to copy is bounded the same way, whether it is a
   * secret, a command, or a block of configuration. They are the same kind of
   * thing to the person reading them: a region to select whole and paste
   * somewhere else. Bounding some of them and not others made the unbounded
   * ones read as commentary, which is exactly what they are not.
   */
  .payload, code.token, pre {
    background: var(--color-recessed);
    border: var(--border-width) solid var(--color-border);
    padding: var(--space-inset);
  }

  .payload { white-space: pre-wrap; overflow-wrap: anywhere; }

  code.token { display: block; overflow-wrap: anywhere; }

  /*
   * Configuration keeps its own line breaks, so it scrolls sideways rather than
   * wrapping: a wrapped JSON or TOML block reads as though it has lines it does
   * not have, and somebody copying it by eye copies the wrap.
   */
  pre { overflow-x: auto; }

  /*
   * A draft Reply, shown to be read.
   *
   * It was a code block, and a code block is one line high: a reply of any real
   * length scrolled sideways inside a strip, which made the one thing on the
   * page the reader has to actually read the hardest thing on it to read. A
   * text area is the element that gives lines their own height, keeps every
   * byte of what is in it, and wraps rather than scrolling.
   *
   * It is read-only, and the same element in both states. It is not read-only
   * because editing is unwanted: editing a draft before approving it is real
   * work with its own release semantics, and it arrives with the change that
   * does that work. Until then the element is the one that will become editable
   * rather than a second element to replace.
   *
   * It takes the recessed ground and the code family the payload blocks take,
   * because it is the same kind of thing as them: bytes shown exactly as they
   * are. It overrides the field width, which is prose measure, because the
   * draft is as wide as the half it sits in.
   */
  .draft {
    display: block;
    width: 100%;
    max-width: none;
    font-family: var(--text-code-family);
    font-size: var(--text-code-size);
    line-height: var(--text-code-leading);
    background: var(--color-recessed);
    border: var(--border-width) solid var(--color-border);
    padding: var(--space-inset);
    resize: vertical;
  }

  .panel-notice { border-color: var(--color-border-strong); border-width: var(--seam-width); }

  table { border-collapse: collapse; width: 100%; }

  th, td {
    border-bottom: var(--border-width) solid var(--color-border);
    padding: var(--space-tight) var(--space-inset) var(--space-tight) 0;
    text-align: left;
    vertical-align: top;
  }

  th {
    font-family: var(--text-label-family);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-track);
    text-transform: uppercase;
    color: var(--color-faint);
  }

  .scroll-x { overflow-x: auto; }


  .state {
    display: inline-block;
    font-family: var(--text-label-family);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    line-height: var(--text-label-leading);
    letter-spacing: var(--text-label-track);
    text-transform: uppercase;
    color: var(--color-on-surface);
    border: var(--border-width) solid var(--color-border-strong);
    padding: var(--space-hair) var(--space-tight);
  }


  .empty {
    border: var(--border-width) dashed var(--color-border);
    padding: var(--space-inset-lg);
    color: var(--color-muted);
    max-width: var(--measure-prose);
  }

  .error {
    border-left: var(--seam-width) solid var(--color-border-strong);
    padding: var(--space-inset) var(--space-inset-lg);
    background: var(--color-recessed);
    max-width: var(--measure-prose);
  }


  .on-dark {
    --color-surface: var(--color-surface-inverse);
    --color-on-surface: var(--color-on-surface-inverse);
    --color-muted: var(--color-muted-inverse);
    --color-faint: var(--color-muted-inverse);
    --color-border: var(--color-border-inverse);
    --color-border-strong: var(--color-on-surface-inverse);
    --color-recessed: var(--color-recessed-inverse);
    --color-control-surface: var(--color-on-surface-inverse);
    --color-on-control: var(--color-surface-inverse);
    --color-focus: var(--color-on-surface-inverse);
    background: var(--color-surface);
    color: var(--color-on-surface);
  }

.shell { display: grid; grid-template-columns: var(--rail-width) 1fr; min-height: 100vh; }

  /*
   * The rail is bound to the viewport, not to the page.
   *
   * It used to scroll away with the content beside it, which put the account
   * and the address at the foot of a long page rather than at the foot of the
   * screen, where a reader who had scrolled could not see them at all. That
   * defeats the point of a rail: the navigation and the statement of whose
   * session this is are supposed to be true of every moment on the surface, not
   * of its first screenful.
   *
   * It keeps its own scrollbar for the case where the rail itself is taller
   * than the screen, so a short viewport still reaches the foot rather than
   * clipping it.
   */
  .shell-rail {
    border-right: var(--seam-width) solid var(--color-seam);
    padding: var(--space-inset-lg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
  }

  /*
   * Navigation and the account are one box, and on a rail that box is the rest
   * of the column: it grows so that the account can be pushed to the foot of
   * the screen rather than sitting under the last navigation item.
   */
  .rail-tabs { display: flex; flex-direction: column; flex: 1; }

  .rail-foot { margin-top: auto; padding-top: var(--space-section); }

  /*
   * The field is allowed to be narrower than the widest thing in it.
   *
   * A column of a grid refuses by default to shrink below the widest unbreakable
   * thing it holds, and a block that keeps its own line breaks (a payload, a
   * configuration) is exactly that. Without this the page itself scrolls
   * sideways and the whole surface moves under the reader, instead of the one
   * block that has more in it than fits.
   */
  .shell-main {
    padding: var(--space-inset-lg);
    max-width: var(--measure-page);
    min-width: 0;
  }


  .axis { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }

  /*
   * The band above the division: who this is, the way back, and the account.
   *
   * It is not a rail laid on its side and it no longer contains one. It used
   * to: the whole of the shell's navigation was rendered into it and arranged
   * as a row, which is how the top band the gate walk of 2026-09-05 retired
   * survived here, above the breakpoint, as this form's permanent shape. Global
   * navigation belongs to the rail, and this form has no rail because the page
   * itself is the division. The way out is one link back to where the surface
   * was entered from, which the secondary navigation carries.
   *
   * Three items on one centre line, and the account pushed to the far end.
   * The items used to sit on a shared baseline while the header beside them
   * centred its own, which is what made the band read as misaligned: two
   * alignment rules meeting in one row.
   */
  .axis-head {
    border-bottom: var(--seam-width) solid var(--color-seam);
    padding: var(--space-inset) var(--space-inset-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inset) var(--space-inset-lg);
    align-items: center;
  }

  .axis-account { margin-left: auto; }

  /*
   * The two halves, and the seam drawn once between them.
   *
   * They are equal because the brand's division is equal: neither side is the
   * main one, which is the whole claim the composition makes. The split
   * stretches to the foot of the screen rather than stopping where the shorter
   * half runs out, because a seam that ends halfway down the page is a line and
   * not a division.
   *
   * The dark half takes the inverse role scope through the same class the rail
   * takes, applied in the markup rather than reproduced here. A component
   * placed on it names the roles it always names and they resolve differently
   * for where it sits, so nothing in the page has to know which side of the
   * seam it is on.
   */
  .split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100%; }

  /*
   * Both halves are allowed to be narrower than the widest thing in them, for
   * the reason given on the field above: the draft is shown with its own line
   * breaks kept, so it is the block that scrolls sideways and never the page.
   * A draft with one very long line would otherwise push the seam off the
   * screen, which is the one thing on this surface that must not move.
   */
  .split-them, .split-you { min-width: 0; }

  .split-them {
    border-right: var(--seam-width) solid var(--color-seam);
    padding: var(--space-inset-lg);
  }

  .split-you { padding: var(--space-inset-lg); }

  /*
   * Whatever closes the answering side stands away from the draft above it,
   * whether that is the act or the statement that replaces the act once there
   * is nothing left to do. Both hold the same position, so the page does not
   * shift under a reader who approves and comes back to look again.
   */
  .split-you > :last-child { margin-top: var(--space-block); }


  .plain { min-height: 100vh; }

  .plain-main {
    padding: var(--space-inset-lg);
    max-width: var(--measure-page);
    margin: 0 auto;
  }


  .plain header {
    border-bottom: var(--seam-width) solid var(--color-seam);
    padding: var(--space-inset) var(--space-inset-lg);
  }

  .shell-rail header { margin-bottom: var(--space-section); }

  .rail-brand {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    text-decoration: none;
  }

  .rail-wordmark {
    font-family: var(--text-h3-family);
    font-size: var(--text-h3-size);
    font-weight: var(--text-h1-weight);
    letter-spacing: var(--text-h1-track);
  }

  .mark { flex: none; }

  .account-handle {
    margin-top: var(--space-tight);
    font-family: var(--text-meta-family);
    font-size: var(--text-meta-size);
    color: var(--color-muted);
  }

  .axis-head header { display: flex; flex-wrap: wrap; gap: var(--space-inset); align-items: center; }
  .axis-head .account-handle { margin-top: 0; }


  .rail-nav ul { list-style: none; }
  .rail-nav li { margin-bottom: var(--space-tight); }

  .rail-nav a, .account-link {
    font-family: var(--text-hint-family);
    font-size: var(--text-hint-size);
    color: var(--color-muted);
    text-decoration: none;
    display: block;
  }

  .rail-nav a:hover, .rail-nav a:focus-visible,
  .account-link:hover, .account-link:focus-visible { color: var(--color-on-surface); }

  .account-link-label { display: block; font-weight: var(--text-control-weight); }

  .account-link-email {
    display: block;
    font-size: var(--text-label-size);
    color: var(--color-faint);
    overflow-wrap: anywhere;
    margin-top: var(--space-hair);
  }

  /* The tab form of the account link, which only the narrow width shows. */
  .account-link-tab { display: none; }

  /*
   * Where the secondary navigation goes in each frame.
   *
   * The component itself is in components.ts and knows nothing about any
   * frame. All that belongs here is its position: under the identity in a rail,
   * beside it in the axis band, under the masthead rule on a signed-out page.
   * In the axis band it needs no rule at all, because the band spaces its own
   * children and the account is what claims the far end.
   */
  .shell-rail .back-nav { margin-bottom: var(--space-section); }
  .plain .back-nav { padding: var(--space-inset) var(--space-inset-lg); }


  main > * + * { margin-top: var(--space-block); }
  main > section + section { margin-top: var(--space-section); }

  section > * + * { margin-top: var(--space-tight); }
  section > h1 + *, section > h2 + *, section > h3 + * { margin-top: var(--space-block); }

  li + li { margin-top: var(--space-hair); }
  fieldset + fieldset { margin-top: var(--space-block); }


  .page-head { margin-bottom: var(--space-section); }
  .page-head .meta { margin-top: var(--space-hair); }
  .section { margin-bottom: var(--space-section); }
  .stack > * + * { margin-top: var(--space-block); }


  @media (max-width: 48rem) {
    .shell { grid-template-columns: 1fr; min-height: 0; }

    /*
     * The division folds to one column and keeps filling the frame.
     *
     * It used to be told min-height: 0 here alongside the shell, which left
     * the two stacked halves as tall as their content inside a frame that is
     * still the height of the screen. On a short draft that showed as a band of
     * the page's own ground under the lower half: the seam divided the halves
     * and then the division simply stopped, which is the one thing this
     * composition is not allowed to do.
     */
    .split { grid-template-columns: 1fr; }

    .shell-rail, .split-them {
      border-right: 0;
      border-bottom: var(--seam-width) solid var(--color-seam);
    }

    /*
     * What is left of the rail at the top: the brand and whose session this is,
     * on one line, and nothing else competing with them for it.
     *
     * It does not stick. A rail pinned down the side of a wide screen costs
     * nothing; a band pinned across the top of a phone costs a chunk of the
     * reading area on every scroll, and there is far less of it to spend. The
     * tabs are what is worth pinning, and they are pinned at the other end.
     */
    .shell-rail {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-inset) var(--space-inset-lg);
      position: static;
      height: auto;
      overflow-y: visible;
    }

    .shell-rail header { margin-bottom: 0; display: flex; align-items: center; gap: var(--space-inset); }
    .account-handle { margin-top: 0; }

    /*
     * The axis band takes two rows here, deliberately, rather than one crowded
     * one that wraps wherever the words happen to end.
     *
     * The identity claims the first row on its own, which is the same first row
     * the rail's remains show on every other surface at this width. The way out
     * and the account share the second, at either end of it. Left to wrap by
     * itself the band put the account alone on a second row with the way back
     * trailing off the end of the first, which is the failure the wide band had
     * and there is no reason to reproduce it a breakpoint down.
     */
    .axis-head header { flex: 1 1 100%; }

    /*
     * The tabs, at the foot of the screen.
     *
     * Four of them, equal, by giving the navigation three shares and the
     * account one: they are four items of one kind here, and a tab that is
     * wider than its neighbour because its word is longer reads as the
     * important one.
     *
     * The bar carries the seam along its top edge in the seam's own weight, so
     * the line between the page and the navigation is the same line the rail
     * drew beside the field.
     */
    .rail-tabs {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      display: flex;
      /*
       * Named rather than inherited. The rail's own box is a column, and a
       * declaration that only looks complete leaves the tabs stacked in two
       * rows here: the navigation on one, the account under it. Found by
       * looking at the surface rendered rather than by reading this file, which
       * is now the third time in this change.
       */
      flex-direction: row;
      flex: none;
      background: var(--color-surface);
      border-top: var(--seam-width) solid var(--color-seam);
    }

    .rail-tabs .rail-nav { flex: 3; }
    .rail-nav ul { display: flex; }
    .rail-nav li { flex: 1; margin-top: 0; margin-bottom: 0; }

    .rail-foot { flex: 1; margin-top: 0; padding-top: 0; }

    .rail-nav a, .account-link {
      padding: var(--space-inset) var(--space-tight);
      text-align: center;
    }

    /*
     * On a tab the account is @me, and it is not the sign-in address. The
     * address is a rail's second line and there is no second line here; it
     * stays on the account surface, which the tab reaches in one tap.
     */
    .account-link-label, .account-link-email { display: none; }
    .account-link-tab { display: block; font-weight: var(--text-control-weight); }

    /*
     * The strip the bar takes out of the screen, given back to the page.
     *
     * Only the field reserves it, because only the chrome form has a bar. The
     * axis form used to reserve it too, in its lower half, and does not any
     * more: it carries no tab bar to reserve for.
     */
    .shell-main { padding-bottom: var(--space-tabbar); }
  }