/* ===================== the registry on a handset =====================

   Loaded last on every page, and every rule in it lives inside a width
   query. Nothing here reaches a desktop: the wide view is byte-identical
   to what it was before this file existed, which is the point -- the
   terminal was drawn for a desk and should stay drawn for one.

   The registry had no viewport meta at all until now, so a phone laid every
   page out at ~980px and scaled it down to fit. Everything was legible only
   under a pinch. With the meta in place the pages arrive at their real
   width, and this file is what makes that width work: the tables become
   cards, the label/field rows stack, and anything you are meant to press is
   big enough to press with a thumb.

   One breakpoint, 760px. Below it you are on a phone or a narrow tablet in
   portrait; above it the desk layout already holds. A few rules sharpen
   again at 420px for the small end of the range. */

@media (max-width: 760px) {

  /* ---------------------------------------------------------- the page */

  /* Inline padding stays at 16px on purpose. The classification banners
     bleed to the edge with margin: 0 -16px, and any other value here opens
     a gap at both ends of them. Only the vertical figures come down. */
  .page-list {
    padding: 12px 16px 36px;
  }

  /* Long designations, room links, log targets and cryptonyms are all
     unbreakable strings wider than a phone. Without this the whole document
     gets a horizontal scrollbar because of one of them. */
  body { overflow-wrap: break-word; }
  code, .atx-desig, .atx-crypt, .atx-logtarget, .atx-notice-link {
    overflow-wrap: anywhere;
  }

  /* The marking is four segments and wraps to three lines at this width.
     It is a marking, not a headline; it can be set smaller. */
  .atx-clsbar {
    font-size: 8px;
    letter-spacing: 0.14em;
    padding: 5px 12px;
    line-height: 1.7;
  }

  /* ------------------------------------------------------- the masthead */

  .atx-masthead-row { gap: 8px; align-items: center; }
  .atx-seal { font-size: 17px; padding: 3px 5px; }
  .atx-abbr { font-size: 15px; letter-spacing: 0.24em; }
  /* The full name and the motto are the two things on the masthead that
     nobody navigates by, and between them they take three lines. The name
     keeps its first line; the Latin goes. */
  .atx-name { flex: 1 1 100%; font-size: 9.5px; }
  .atx-motto { display: none; }

  /* The session line is six fields of reference data. Kept -- it is what
     tells an operator which credential they are signed in on -- but set as
     a compact wrap rather than a row that shreds into single words. */
  .atx-session {
    gap: 4px 14px;
    font-size: 8.5px;
    margin-top: 7px;
    padding-top: 6px;
  }
  .atx-session-spacer { display: none; }
  /* Sign out is an action in a line of labels, so it is given the size of
     one instead of being the same 9px grey as the text around it. */
  .atx-signout {
    margin-left: auto;
    padding: 6px 12px;
    font-size: 9.5px;
    color: var(--fg);
  }

  /* ------------------------------------------------------------- the nav */

  /* Ten links in four labelled groups is a desk arrangement. On a phone the
     labels are dropped and the links become pills that wrap -- everything
     stays on screen and reachable, which a horizontally scrolling strip
     cannot promise, and every target clears 40px. */
  .atx-nav {
    gap: 6px;
    padding: 8px 0 10px;
    align-items: center;
  }
  .atx-navgroup { gap: 6px; }
  .atx-navgroup-label { display: none; }
  .atx-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    border: 1px solid var(--rule);
    color: var(--fg);
    text-decoration: none;
  }
  /* The desktop active mark is an inset underline on a bare link. On a pill
     it reads as a stray line, so the pill itself takes the accent. */
  .site-nav a.active {
    box-shadow: none;
    border-color: var(--accent);
    background: rgba(200, 162, 74, 0.1);
  }
  .atx-nav-count {
    margin-left: 7px;
  }

  /* ------------------------------------------------------------ headings */

  .page-list h1, .conv-header h1 { font-size: 16px; line-height: 1.4; }
  .list-header { gap: 4px; }
  .list-header h1 .muted { display: block; font-size: 10px; }

  /* ---------------------------------------------- tables become records */

  /* A seven-column result grid cannot be made to fit, and squeezing it into
     a sideways-scrolling box means the columns you need are the ones off
     screen. Each row is set as what it actually is -- one record -- with
     the column headings carried down onto the cells as labels. The labels
     come from data-label attributes on the cells, which the wide view never
     reads. */
  /* display:none rather than a clipped box. The usual visually-hidden
     recipe pins the thead at 1px and leaves the header cells laid out
     inside it at their full table width, hanging off the side of the
     viewport. Nothing is lost by removing it outright: every heading is
     reprinted on its own cell below by the data-label rule. */
  .atx-grid thead { display: none; }
  .atx-grid,
  .atx-grid tbody,
  .atx-grid tr,
  .atx-grid td { display: block; width: 100%; }

  .atx-grid { margin: 12px 0; border-collapse: separate; }
  .atx-grid tr {
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 10px 12px 8px;
    margin-bottom: 10px;
  }
  .atx-grid tbody tr:hover { background: var(--paper); }

  .atx-grid td {
    border: 0;
    padding: 5px 0;
    display: flex;
    gap: 8px;
    align-items: baseline;
    text-align: right;
    min-height: 0;
  }
  /* The label is pushed left and everything else falls in behind it on the
     right, in order. space-between would have done for a cell holding one
     value, but several hold two -- a clearance numeral and the name of that
     clearance, a file kind and its label -- and it spread those to opposite
     ends of the row as though they were unrelated. */
  .atx-grid td::before {
    content: attr(data-label);
    margin-right: auto;
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
  }
  /* The `num` alignment is already what the stacked row does to every cell,
     and the class only matters here for the typeface. */
  .atx-grid td.num, .atx-grid th.num { text-align: right; }

  /* The first cell is the record's name -- designation, operator, sender.
     It gets the top of the card to itself, above a rule, the way the
     heading of a filed slip does. */
  .atx-grid tbody tr > td:first-child {
    display: block;
    text-align: left;
    padding: 0 0 8px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--rule);
    font-size: 13.5px;
  }
  .atx-grid tbody tr > td:first-child::before {
    display: block;
    margin-bottom: 3px;
  }

  /* Columns that carry prose rather than a token. Set opposite their label
     they right-align, and a subject line long enough to wrap then reads as
     a ragged-left block with the first word of each line somewhere new --
     the one shape running text must not take. These stack instead: label,
     then the value left-aligned underneath it, which is how the first cell
     of the card is already set. */
  .atx-grid td[data-label="Subject line"],
  .atx-grid td[data-label="Name of record"],
  .atx-grid td[data-label="Category"],
  .atx-grid td[data-label="Heading"],
  .atx-grid td[data-label="Role"],
  .atx-grid td[data-label="Target"],
  .atx-grid td[data-label="To"] {
    display: block;
    text-align: left;
  }
  .atx-grid td[data-label="Subject line"]::before,
  .atx-grid td[data-label="Name of record"]::before,
  .atx-grid td[data-label="Category"]::before,
  .atx-grid td[data-label="Heading"]::before,
  .atx-grid td[data-label="Role"]::before,
  .atx-grid td[data-label="Target"]::before,
  .atx-grid td[data-label="To"]::before {
    display: block;
    margin-bottom: 3px;
  }
  /* The recipients of one transfer are a list, not a line. */
  .atx-grid .atx-sent-to { display: flex; flex-wrap: wrap; gap: 4px 10px; }

  /* A cell with no label is an actions cell (Open, Revoke, Withdraw, the
     clearance selector). It takes the foot of the card, full width. */
  .atx-grid td:not([data-label]) {
    display: block;
    text-align: left;
    padding-top: 9px;
  }
  .atx-grid td:not([data-label]):empty { display: none; }

  /* The empty state is a single cell spanning the vanished header. */
  .atx-grid td[colspan] {
    display: block;
    text-align: left;
    border-bottom: 0;
    font-size: 12.5px;
  }
  .atx-grid tr:has(> td[colspan]) { padding: 12px; }

  /* Buttons inside a card: pressable, and side by side rather than stacked
     into a column of full-width bars. */
  .atx-grid td button,
  .atx-grid td .atx-gen,
  .atx-grid td .atx-danger {
    min-height: 38px;
    padding: 8px 16px;
  }
  .atx-outbox-actions { flex-wrap: wrap; gap: 8px; }
  .atx-inline-form { display: inline-block; }

  /* The clearance control on the operator roll: select over button, both
     full width, rather than a select squeezed beside a button. */
  .atx-clearance { gap: 8px; margin-bottom: 10px; }
  .atx-clearance select { flex: 1 1 100%; font-size: 16px; padding: 9px 10px; }
  .atx-clearance button { flex: 1 1 100%; min-height: 40px; }

  /* Links that name a record -- a designation, a cryptonym, a subject line
     -- are the whole reason each row is on the page, and they arrived as
     13 to 21px of text. They are given the height of something you are
     meant to hit rather than something you are meant to read past. */
  .atx-grid td:first-child a,
  .conv-row .conv-title,
  .conv-row .atx-crypt,
  .conv-row .atx-desig,
  .atx-panel-more,
  .atx-subject-link,
  .atx-cite-link {
    display: inline-block;
    padding-block: 7px;
  }
  .atx-abbr { display: inline-block; padding-block: 6px; }
  .atx-signout { padding: 9px 13px; }

  /* The same again for the links that are not the first thing in their row:
     a subject line in a result card, a cryptonym in a tight table, the "see
     all" at the foot of a panel. */
  .atx-grid td .conv-title,
  .atx-grid td .atx-crypt,
  .atx-grid td .atx-desig,
  .atx-table-tight td a { display: inline-block; padding-block: 8px; }
  .atx-panel-more { padding-block: 9px; }

  /* A tick box is 20px and its label is the rest of the row. Sizing the row
     rather than the box is what makes the whole line the target, which is
     how every one of these is actually pressed. */
  .fav-filter, .atx-burn { min-height: 42px; }

  /* A 13px tick box is a desk control drawn at the size of the type beside
     it. Both of these (recurring subjects only, burn after reading) change
     what a press does, so they are worth hitting first time. */
  .atx-wide input[type=checkbox],
  .atx-wide input[type=radio] { width: 20px; height: 20px; }
  .atx-wide input[type=checkbox]:checked::after,
  .atx-wide input[type=radio]:checked::after { inset: 3px; }

  /* The tight tables (top subjects, weekday counts, the denial slip) stay
     real tables -- two or three short columns each, which fit. They only
     need room to breathe. */
  .atx-table { font-size: 12.5px; }
  .atx-table th, .atx-table td { padding: 8px 8px; }
  .atx-table-tight th:first-child, .atx-table-tight td:first-child {
    padding-left: 0;
  }
  .atx-denied-table th { width: 34%; }

  /* The standing orders carry four reference tables -- the collections, the
     disposition classes, the clearance ladder, the intake periods -- and
     each is a comparison read across the row. Stacking them into cards
     would destroy the thing they are for, and five columns will not fit a
     phone, so each gets a box of its own to scroll inside while the page
     around it stays still. */
  .atx-doc .atx-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .atx-doc .atx-table th, .atx-doc .atx-table td { white-space: nowrap; }

  /* ------------------------------------------------------- field blocks */

  /* Two columns of label-over-value is the most that fits and still leaves
     the values room; several of them (subject line, contact window) are
     long enough to want the whole width. */
  .atx-fields { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px 16px; }
  .atx-fields-boxed { padding: 12px 14px; }
  .atx-docctl { grid-template-columns: 1fr 1fr; padding: 10px 12px; }

  /* -------------------------------------------------------- the panels */

  /* One column. The desk grid's auto-fit minimum is 320px, which technically
     survives a 360px phone and then has nothing left over for the gutters
     the panels sit in. */
  .atx-desk-grid { grid-template-columns: 1fr; gap: 12px; }
  .atx-panel { padding: 12px 13px 14px; }
  .atx-panel-head { font-size: 10px; letter-spacing: 0.16em; }
  .atx-panel-head .muted { display: block; margin-top: 3px; letter-spacing: 0.1em; }

  /* ---------------------------------------------------- forms and fields */

  /* 16px on every field that takes a keyboard. Below 16px iOS zooms the
     page in on focus and does not zoom back out, which leaves the operator
     stranded at 1.3x on a page they then have to pinch their way around.
     This is the single most valuable rule in the file.

     Written twice, and the second time through .page-list, because almost
     every field on this site is sized by a rule carrying a class of its own
     -- .atx-facet select, .atx-transfer-control textarea, .vt-toolbar
     input. A bare type selector loses to all of those on specificity and
     the fields stayed at 12.5px. The descendant form outranks them, and
     the bare form still covers the sign-in page, which has no .page-list
     around it. */
  input[type=text],
  input[type=password],
  input[type=search],
  input[type=number],
  input[type=email],
  select,
  textarea,
  .page-list input[type=text],
  .page-list input[type=password],
  .page-list input[type=search],
  .page-list input[type=number],
  .page-list input[type=email],
  .page-list select,
  .page-list textarea {
    font-size: 16px;
  }

  /* Anything you press is at least 40px tall. */
  button,
  input[type=submit],
  .atx-btn {
    min-height: 40px;
  }

  /* The console lookup: field over button, both full width. The field
     carried min-width: 260px, which forced the button off the line. */
  .atx-lookup { gap: 8px; margin: 14px 0 10px; }
  .atx-lookup input { flex: 1 1 100%; min-width: 0; padding: 12px 13px; }
  .atx-lookup button { flex: 1 1 100%; padding: 13px 20px; }

  /* The subject index filter row. */
  .filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .filters input[type=text], .filters select, .filters button { width: 100%; }
  .fav-filter { display: flex; align-items: center; gap: 10px; }

  /* Query facets are already one per row below 720px; the actions line is
     what is left, and a right-aligned pair of small controls at the foot of
     a tall form is a thumb's worth of travel for nothing. */
  .atx-facets { padding: 13px 14px; gap: 12px; }
  .atx-facet-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
  }
  .atx-facets button { width: 100%; padding: 13px 20px; }
  .atx-facet-actions .orig-link { text-align: center; padding: 10px; }

  /* The issue, transfer and board forms all stack their label above their
     control below 720px already. What they still need is controls that run
     the width and a submit worth pressing. */
  .atx-issue-control { flex-wrap: wrap; gap: 8px; }
  .atx-issue-control input[type=text],
  .atx-issue-control select { flex: 1 1 100%; padding: 10px; }
  .atx-issue-control .atx-gen { flex: 1 1 100%; }
  .atx-issue-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .atx-issue-actions button { width: 100%; padding: 13px; }
  .atx-issue-actions .atx-panel-note { text-align: left; }

  /* The row turns into a column at 720px but keeps align-items:flex-start,
     which on a column axis sizes each child to its content instead of the
     width. Every control on the compose form -- the payload box, the note,
     the expiry -- was rendering at about half the screen with the rest of
     the row empty beside it, and their own width:100% could not help,
     because 100% of a shrink-wrapped parent is still shrink-wrapped. */
  .atx-transfer-row { align-items: stretch; }
  .atx-transfer-control { width: 100%; }
  .atx-transfer-control textarea { min-height: 120px; }
  .atx-transfer-inline { gap: 12px; }
  .atx-transfer-inline select { flex: 1 1 100%; }
  .atx-burn { display: flex; align-items: center; gap: 10px; }
  .atx-chips { min-height: 46px; padding: 6px 8px; }
  .atx-chip-entry { font-size: 16px; min-width: 120px; }
  .atx-modes { display: flex; gap: 18px; flex-wrap: wrap; }
  .atx-modes label { display: flex; align-items: center; gap: 8px; min-height: 38px; }

  .atx-specimen-form { gap: 10px; }
  .atx-specimen-form button { width: 100%; }

  /* The fold headings on the terminal are the handle for a whole section of
     the page and sit at the top of a very long one. */
  .atx-fold > summary { min-height: 42px; padding: 8px 0; }

  /* ----------------------------------------------------------- the list */

  /* Subject rows and file rows are a grid of columns on the desk. Stacked,
     each row reads as a line and its details underneath, and the whole row
     is a target. */
  .conv-row { padding: 12px 0; }
  .conv-row .conv-title { display: block; margin: 3px 0; font-size: 14px; }
  .conv-meta { display: block; margin-top: 4px; font-size: 10.5px; }

  .pager { flex-wrap: wrap; gap: 6px; justify-content: center; }
  .pager-num, .pager-arrow, .pager-current {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ------------------------------------------------------------ sign in */

  .atx-loginwrap { padding: 24px 16px; }
  .atx-loginbox { padding: 20px 18px 18px; }
  .atx-login-masthead { gap: 12px; padding-bottom: 14px; margin-bottom: 16px; }
  .atx-login-masthead .atx-abbr { font-size: 18px; }
  .atx-loginform input { padding: 12px; }
  .atx-loginform button { padding: 14px; font-size: 12px; }
  .atx-login-foot { font-size: 11px; line-height: 1.6; }
  .atx-login-legal { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
  .atx-login-legal a { padding: 8px 4px; }

  /* Privacy and Terms. The page sets these in its own <style> block, which
     loads after this file, so the rule is written to outweigh it rather
     than to tie with it and lose. */
  .atx-legal .atx-legal-foot a { display: inline-block; padding: 9px 0; }
  .atx-legal .atx-legal-foot { gap: 4px 18px; }
  .atx-legal p { font-size: 14px; }

  /* ------------------------------------------------------- the documents */

  .atx-doc .lede, .lede { font-size: 14.5px; line-height: 1.65; }
  .atx-doc h2 { font-size: 14px; margin-top: 26px; }
  .atx-doc p { font-size: 13.5px; }
  .atx-stats { gap: 18px 26px; }
  .atx-stat-value { font-size: 21px; }

  /* The board. A notice is read top to bottom; it only needs the room. */
  .atx-notice-card { padding: 16px 0 18px; }
  .atx-notice-meta { flex-wrap: wrap; gap: 6px 12px; }
  .atx-notice-link { display: inline-block; padding: 8px 0; }

  /* --------------------------------------------------------- the record */

  .atx-filehead .atx-masthead-row { gap: 8px; }
  .atx-filehead-desig { font-size: 13px; }
  .atx-reading-head { flex-wrap: wrap; gap: 4px; }
  .atx-reading-note { flex: 1 1 100%; font-size: 10px; }
  .atx-denied-actions { flex-wrap: wrap; gap: 8px; }
  .atx-denied-actions .orig-link,
  .atx-denied .orig-link { padding: 10px 14px; }
  .atx-msg-body, .atx-msg-text { font-size: 14px; line-height: 1.65; }
  .atx-file-head { flex-wrap: wrap; gap: 6px; }

  /* ----------------------------------------------------------- the vault */

  .vt-toolbar { flex-wrap: wrap; }
  .vt-toolbar input[type="search"] { flex: 1 1 100%; padding: 10px; }
  .vt-toolbar .atx-btn { flex: 1 1 100%; }
  .vt-steps { padding-left: 20px; font-size: 13.5px; }
  .vt-acts { display: flex; flex-direction: column; gap: 10px; }
  .vt-acts .atx-btn { width: 100%; }
  .vt-person header { flex-wrap: wrap; }
  .vt-row { flex-wrap: wrap; gap: 4px 10px; }

  /* ------------------------------------------------------------ the foot */

  .atx-foot {
    margin-top: 30px;
    flex-direction: column;
    gap: 4px;
    font-size: 8.5px;
  }
}

/* ================== the council room on a handset ==================== */

/* The room is the one page that is a whole screen rather than a document,
   so it gets its own block. Everything above the log is chrome the room
   does not need while you are in it, and on a 700px-tall phone that chrome
   was taking half the room. */

@media (max-width: 760px) {

  /* The page itself already does not scroll (body.atx-room). Here the
     furniture around the log is cut back to almost nothing so the messages
     get the screen. */
  .atx-room .page-list { padding: 8px 10px 0; }
  .atx-room .atx-clsbar { font-size: 7.5px; padding: 4px 10px; margin: 0 -10px 8px; }
  /* The masthead name, motto and the six-field session line are all
     reference, and reference belongs on a page you can scroll. */
  .atx-room .atx-masthead { padding-bottom: 6px; margin-bottom: 2px; }
  .atx-room .atx-session { display: none; }
  .atx-room .atx-name { display: none; }
  /* Everywhere else the nav wraps to three rows of pills, which is right on
     a page you scroll. The room is not a page you scroll -- it is a screen,
     and three rows of pills is 200px of it spent on the way out. Here the
     nav is one strip you swipe instead. The scrollbar is hidden because a
     bar under the nav on a phone is furniture nobody needs to be told
     about; the strip is obviously draggable from the pill cut off at its
     edge. */
  .atx-room .atx-nav {
    padding: 6px 0 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .atx-room .atx-nav::-webkit-scrollbar { display: none; }
  .atx-room .atx-navgroup { flex-wrap: nowrap; flex: 0 0 auto; }
  .atx-room .atx-nav a { flex: 0 0 auto; min-height: 34px; }

  .atx-room .atx-council-panel { padding: 0; border: 0; background: transparent; }
  .atx-room .atx-council-head { flex-wrap: wrap; gap: 8px; }
  .atx-room .atx-council-head .atx-panel-head {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
  }
  /* "Held under seal" is dropped on a phone, which puts Re-key and
     Incinerate on the title's row instead of pushing Incinerate onto one of
     its own -- a whole line of chrome recovered for messages, which is the
     scarcest thing on this screen.

     Only the reassuring half goes. The other branch of that div says the
     room is NOT written down and ends with the process, and a warning is
     worth a line anywhere. display:contents on the wrapper so that dropping
     its only child leaves no empty flex item holding the row's gap open. */
  .atx-room .atx-council-standing { display: contents; }
  .atx-room .atx-council-kept { display: none; }
  .atx-room .atx-council-rekey, .atx-room .atx-incin { flex: 0 0 auto; }
  /* Re-key and Incinerate are rare and destructive. They stay reachable and
     stay small, so a thumb reaching for the log does not find them. */
  .atx-council-rekey, .atx-incin-handle { min-height: 34px; font-size: 9px; }
  /* Right-anchored to a handle near the right edge of the screen, the menu
     ran off the LEFT of it instead -- 286px of panel hanging at -93px. On a
     phone it is pinned to the page rather than to the handle, which is
     where a menu this size has to be. */
  .atx-incin-menu {
    position: fixed;
    right: 10px;
    left: 10px;
    top: auto;
    width: auto;
  }
  .atx-incin-opt { min-height: 42px; }

  .atx-room .atx-council-log { padding: 10px 2px 6px; border-left: 0; border-right: 0; }
  .atx-council-row { gap: 8px; }
  .atx-council-body { font-size: 14px; line-height: 1.55; }
  .atx-council-gutter { flex-basis: 26px; }
  .atx-council-seal { width: 26px; height: 26px; }
  .atx-council-pic { max-width: 100%; }

  /* The room's column, pinned to the visual viewport.

     This is the one place on the phone layout that is positioned against
     the viewport, and it is deliberately the only one. iOS does not shrink
     the LAYOUT viewport for a keyboard -- it draws the keyboard over the
     page -- so anything fixed to the layout viewport ends up underneath it.
     The visual viewport is the one that reports what is on screen, and
     roomfit.js publishes its two numbers: --atx-vvh is its height and
     --atx-vvtop is how far down the layout viewport it has been pushed.

     The composer used to be the thing fixed here, with the log carrying a
     measured strip of padding to stay clear of it. That is two numbers that
     have to agree on every frame of a keyboard animation, and they did not:
     opening and closing the keyboard left the room flickering and the last
     message half under the bar. Pinning the column instead puts the
     composer and the log back in ordinary flow inside it, where the log
     cannot overlap the composer for the same reason no flex item overlaps
     the next one. Nothing left to keep in step, nothing left to flicker.

     The dvh fallback is for a page whose script has not run, and is also
     the whole answer on any browser honouring interactive-widget in the
     viewport meta tag -- there the engine resizes the layout viewport
     itself and these properties simply agree with it. */
  body.atx-room > .page-list {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--atx-vvh, 100dvh);
    transform: translateY(var(--atx-vvtop, 0px));
    padding-bottom: 0;
    overflow: hidden;
  }

  /* Back in the column, as the last item of it. */
  .atx-room .atx-council-form {
    flex: 0 0 auto;
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--rule);
  }
  /* No safe-area inset while the keyboard is up: the home indicator is over
     the keyboard, not over the bar, and adding it there floats the bar. */
  .atx-kbd .atx-council-form { padding-bottom: 8px; }

  /* While the keyboard is up there are two or three hundred pixels left and
     they belong to what is being said. The masthead and the nav fold away
     and come back the moment the field is let go. */
  .atx-kbd .atx-masthead,
  .atx-kbd .atx-nav,
  .atx-kbd .atx-clsbar,
  .atx-kbd .atx-council-head { display: none; }
  .atx-kbd .page-list { padding-top: 4px; }

  .atx-council-bar { padding: 5px 6px; gap: 6px; }
  .atx-council-form textarea { font-size: 16px; padding: 10px 4px; }
  .atx-council-bar button[type=submit] { min-height: 40px; padding: 0 16px; }
  .atx-council-clip { min-width: 40px; min-height: 40px; display: flex;
                      align-items: center; justify-content: center; }
  /* The word beside the plus is a desk affordance; the plus is the control. */
  .atx-council-clip-say { display: none; }
  .atx-council-staged { max-width: 100%; }
  .atx-council-jump { width: 100%; min-height: 38px; }
}

/* ======================= the small end of the range =================== */

/* 360px and under is where a phone stops having slack. The rules above hold
   at this width; these only stop two or three things from being the reason
   the page scrolls sideways. */

@media (max-width: 420px) {
  .atx-abbr { font-size: 14px; letter-spacing: 0.2em; }
  .atx-clsbar { font-size: 7.5px; letter-spacing: 0.1em; }
  .atx-fields, .atx-docctl { grid-template-columns: 1fr; }
  .atx-nav a { padding: 0 10px; font-size: 10px; }
  .atx-grid td { gap: 10px; }
  .atx-grid td::before { font-size: 8px; letter-spacing: 0.14em; }
  .atx-stat-value { font-size: 19px; }
  .atx-counter { padding: 12px; }
}