/* ---- The organism's screens: the window's six, the switcher and the nine standard parts. --------
   Signal writes no word of its own here: every word drawn is a value of the args the window hands, or the
   name of one of their fields, set in the mono as a byte is. So it is worn on any road and in any language. */

/* `frame`: the root every screen stands in, its own room; the mark, the route, back, the title, what the home says. */
.signal-root {
  container: signal-site / inline-size;
  display: block;
  min-width: 0;
  background: var(--signal-surface);
  color: var(--signal-body);
  font-family: var(--signal-font);
  font-size: calc(var(--signal-size-base) * var(--access-text-size, 1));
  line-height: calc(1.6 * var(--access-leading, 1));
  -webkit-font-smoothing: antialiased;
  /* No text runs wider than its room: a word with no space, an address, a key, breaks where it must, and counts as
     broken when its room is measured, so no name widens a row, a grid or the page. */
  overflow-wrap: anywhere;
  color-scheme: var(--signal-scheme);
}
/* A sign: a figure of the design's own beside a word, as high as the word and in its ink. No letter of a device's. */
.signal-sign {
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}
/* A pill stays whole beside what it stands with, and breaks only where it alone is wider than its room. */
.signal-root .signal-pill {
  box-sizing: border-box;
  flex: none;
  max-width: 100%;
  white-space: normal;
}
.signal-root .signal-root {
  background: none;
}

/* `organism` and `lobe`: the describe look. A page of parts, each named by its field in the mono, a filament
   running out from the name; ruled entries, as a site's are. */
.signal-page {
  display: grid;
  gap: 2rem;
  min-width: 0;
  padding-inline: var(--signal-edge, var(--signal-gutter));
}
/* The describe look keeps its own gutter where no frame lays one, and tells what it holds, a slot's page
   among it, to lay none. */
.signal-page > * {
  --signal-edge: 0px;
}
.signal-page-head {
  display: grid;
  gap: 0.5rem;
}
/* What is the organism's own, at home: one press as wide as the page, the home's word and a sign that
   turns, ruled as a part is. Closed, nothing of the organism stands under it. */
.signal-opens {
  margin: 0;
  border-top: 1px solid var(--signal-line-strong);
}
.signal-opens-press {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}
.signal-opens-press .signal-sign {
  color: var(--signal-muted);
}
.signal-opens-press:hover .signal-sign {
  color: var(--signal-accent);
}
.signal-opens-press:focus-visible {
  outline: 2px solid var(--signal-accent);
  outline-offset: 2px;
}
.signal-meta {
  margin: 0;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.signal-part {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}
.signal-part-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--signal-accent);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.signal-part-name::after {
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--signal-filament);
  content: '';
}
.signal-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--signal-line-strong);
  list-style: none;
}
.signal-item {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid var(--signal-line);
}
.signal-item-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}
.signal-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--signal-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.signal-link:hover {
  color: var(--signal-accent);
}
.signal-item-end {
  margin-inline-start: auto;
}
.signal-about-press {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  letter-spacing: 0.04em;
  list-style: none;
  cursor: pointer;
}
.signal-about-press::-webkit-details-marker,
.signal-write-press::-webkit-details-marker {
  display: none;
}
.signal-about-press::before,
.signal-write-press::after,
.signal-row::after {
  color: var(--signal-subtle);
  font-family: var(--signal-font-mono);
  content: '+';
}
.signal-about[open] > .signal-about-press::before,
.signal-write[open] > .signal-write-press::after,
.signal-row[aria-current]::after {
  color: var(--signal-accent);
  content: '\2212';
}
.signal-action-small {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  font-size: var(--signal-size-small);
}
/* A choice of the line that stands, the theme worn: lit as the place stood on is. */
.signal-line .signal-action[aria-pressed='true'] {
  border-color: var(--signal-accent);
  color: var(--signal-accent);
}
.signal-turns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.signal-method {
  margin: 0;
  color: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-size: 1rem;
  font-weight: 500;
}
.signal-write {
  border: 1px solid var(--signal-line-strong);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
}
.signal-write-press {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0 1rem;
  color: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.signal-write-body {
  display: grid;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
}

/* `data`: any answer as a tree to read, in the mono on the sunken ground, a key beside its value. */
.signal-data {
  padding: 0.875rem 1rem;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius);
  background: var(--signal-sunken);
  color: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.signal-data dl,
.signal-data ol {
  margin: 0;
}
.signal-data dl {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  gap: 0.125rem 1rem;
}
/* A value that is a tree itself stands under its key, set in by a rule: a nest costs a step, never a key's width, so
   the deepest value keeps room to be read and nothing runs past the box. */
.signal-data dd:has(> dl),
.signal-data dd:has(> ol) {
  grid-column: 1 / -1;
  padding-inline-start: 0.875rem;
  border-inline-start: 1px solid var(--signal-line);
}
.signal-data ol {
  display: grid;
  gap: 0.375rem;
  padding-inline-start: 1.75rem;
}
.signal-data dt {
  color: var(--signal-muted);
}
.signal-data dd {
  margin: 0;
}
.signal-data li::marker {
  color: var(--signal-subtle);
}

.signal-check {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--signal-accent);
}

/* What a site's app asks or says above its section, in the words the home handed it. Its own class: a stranger's
   tree never wears the home's notice. */
.signal-ask {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 1rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
  color: var(--signal-text);
}
.signal-ask-consent {
  border-color: var(--signal-accent);
  box-shadow: 0 0 28px -10px var(--signal-glow);
}
.signal-ask-say {
  max-width: var(--signal-measure);
  margin: 0;
}

/* A link's consent, in the home's frame and in a site's app alike: the offer as the home words it, one line under
   another in the body's ink, and the fields its yes carries, the width of the consent's words. */
.signal-consent-lines {
  display: grid;
  gap: 0.375rem;
  max-width: var(--signal-measure);
  margin: 0;
  padding: 0;
  color: var(--signal-body);
  font-size: var(--signal-size-small);
  list-style: none;
}
.signal-consent-fields {
  display: grid;
  gap: 0.75rem;
  justify-self: stretch;
  max-width: var(--signal-measure);
}

/* A field with its words; a long text; what a form says of its last press. */
.signal-field-row {
  display: grid;
  gap: 0.375rem;
}
.signal-field-long {
  min-height: 6rem;
  padding-block: 0.625rem;
  resize: vertical;
}
.signal-help {
  max-width: var(--signal-measure);
  margin: 0;
  color: var(--signal-muted);
  font-size: var(--signal-size-small);
}
.signal-told {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--signal-accent) 45%, transparent);
  border-radius: var(--signal-radius);
  background: color-mix(in srgb, var(--signal-accent) 10%, transparent);
  color: var(--signal-text);
  font-size: var(--signal-size-small);
}
.signal-told::before {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--signal-accent);
  content: '';
}
.signal-told-failed {
  border-color: color-mix(in srgb, var(--signal-danger) 50%, transparent);
  background: none;
}
.signal-told-failed::before {
  background: var(--signal-danger);
}

/* `app`: a site's app. Its sections are the beats of one filament, the one shown lit; beside it the person's
   other places, who the person is here, and the line above the place. A bar on a phone, a rail where there is room. */
.signal-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.signal-rail {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem var(--signal-gutter);
  border-bottom: 1px solid var(--signal-line);
}
.signal-rail-list {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.signal-rail-item {
  display: flex;
  flex: none;
  align-items: center;
}
.signal-rail-item + .signal-rail-item::before {
  flex: none;
  width: 1rem;
  height: 2px;
  margin-inline: 0.5rem;
  border-radius: 1px;
  background: var(--signal-filament);
  content: '';
}
.signal-rail-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-small);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}
.signal-rail-step:hover {
  color: var(--signal-text);
}
.signal-rail-node {
  box-sizing: border-box;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid var(--signal-filament);
  border-radius: 50%;
  background: var(--signal-surface);
}
.signal-rail-list {
  counter-reset: signal-rail;
}
.signal-rail-item {
  counter-increment: signal-rail;
}
.signal-rail-no::before {
  content: counter(signal-rail, decimal-leading-zero);
}
.signal-rail-no {
  color: var(--signal-subtle);
  font-size: var(--signal-size-tiny);
}
.signal-rail-step[aria-current] {
  color: var(--signal-text);
  font-weight: 500;
}
.signal-rail-step[aria-current] > .signal-rail-node {
  border-color: var(--signal-accent);
  background: var(--signal-accent);
  box-shadow: 0 0 10px var(--signal-glow);
}
.signal-rail-step[aria-current] > .signal-rail-no {
  color: var(--signal-accent);
}
.signal-places {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-place {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  background: var(--signal-raised);
  color: var(--signal-text);
  font-family: var(--signal-font);
  font-size: var(--signal-size-small);
  font-weight: 600;
  cursor: pointer;
}
.signal-place:hover {
  border-color: var(--signal-accent);
}
.signal-place-wait {
  color: var(--signal-accent);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  font-weight: 500;
}
.signal-place-through {
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  font-weight: 500;
}
/* A row that takes no press: the place stood on, lit as the section shown is, and a home not reached, quiet. */
.signal-place-still {
  cursor: default;
}
.signal-place-still:hover {
  border-color: var(--signal-line-strong);
}
.signal-place[aria-current] {
  border-color: var(--signal-accent);
}
.signal-place[aria-current]::before {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--signal-accent);
  box-shadow: 0 0 10px var(--signal-glow);
  content: '';
}
.signal-place-still:not([aria-current]) {
  color: var(--signal-muted);
}
/* The home's chooser: at home a person meets their places first, a ruled row each, as wide as the room. */
.signal-chooser {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  border-top: 1px solid var(--signal-line-strong);
}
.signal-chooser .signal-place {
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--signal-line);
  border-radius: 0;
  background: none;
  font-size: var(--signal-size-base);
  text-align: start;
}
.signal-chooser .signal-place:hover {
  color: var(--signal-accent);
}
.signal-chooser .signal-place-still:hover {
  color: var(--signal-muted);
}
.signal-chooser .signal-place-still[aria-current]:hover {
  color: var(--signal-text);
}
.signal-chooser .signal-place-through {
  margin-inline-start: auto;
}
/* The home in a pocket: the chooser's places are cards grouped by the home that keeps them, a home's row
   heading its card quiet, each place a row of the card with a plate, its name strong over what waits there in the
   accent, and an arrow where it walks. The home a place is reached through is said by its card, so its words are kept
   for a reader that listens. */
.signal-chooser:has(> .signal-chooser-group) {
  gap: 1.5rem;
  border-top: 0;
}
.signal-chooser-group {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.signal-chooser-head,
.signal-chooser-card {
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-chooser .signal-place-home {
  min-height: 2rem;
  padding: 0 0.25rem;
  border: 0;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signal-chooser .signal-place-home .signal-place-named {
  font-weight: 500;
}
.signal-chooser .signal-place-home[aria-current]::before {
  content: none;
}
.signal-chooser-card {
  overflow: hidden;
  border: 1px solid var(--signal-line);
  border-radius: 1.125rem;
  background: var(--signal-raised);
}
.signal-chooser-card > li + li {
  border-top: 1px solid var(--signal-line);
}
.signal-chooser-card .signal-place {
  flex-wrap: nowrap;
  gap: 0.875rem;
  min-height: 4.5rem;
  padding: 0.75rem 1rem;
  border: 0;
  background: none;
}
.signal-chooser-card .signal-place > .signal-sign {
  margin-inline-start: auto;
  color: var(--signal-subtle);
}
.signal-chooser-card .signal-place:hover > .signal-sign {
  color: var(--signal-accent);
}
.signal-place-plate {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: color-mix(in srgb, var(--signal-accent) 14%, var(--signal-raised));
  color: var(--signal-accent);
}
.signal-place-plate > .signal-sign {
  width: 1.375rem;
  height: 1.375rem;
  stroke-width: 1.75;
}
.signal-place-still .signal-place-plate {
  background: var(--signal-sunken);
  color: var(--signal-subtle);
}
.signal-place-text {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem;
  min-width: 0;
}
.signal-chooser-card .signal-place-named {
  color: var(--signal-text);
  font-size: var(--signal-size-base);
  font-weight: 700;
  line-height: 1.3;
}
.signal-chooser-card .signal-place-still .signal-place-named {
  color: var(--signal-muted);
}
.signal-chooser-card .signal-place-wait {
  font-family: var(--signal-font);
  font-size: var(--signal-size-small);
  font-weight: 600;
}
.signal-chooser-group .signal-place-through {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.signal-chooser-card .signal-pill {
  margin-inline-start: auto;
}

/* The home's own page in a pocket: what the person does at home stands under quiet headings, each part's rows a card
   as the chooser's are; the places blocked one quiet row that opens on them; and on a tablet one column in the middle
   of the screen, as a place's talk keeps. */
.signal-home-pocket {
  gap: 1.75rem;
}
.signal-home-pocket .signal-part-name {
  padding-inline: 0.25rem;
  color: var(--signal-muted);
  letter-spacing: 0.08em;
}
.signal-home-pocket .signal-part-name::after {
  content: none;
}
.signal-home-pocket .signal-part:not(.signal-quiet) > .signal-list,
.signal-home-pocket .signal-quiet {
  overflow: hidden;
  border: 1px solid var(--signal-line);
  border-radius: 1.125rem;
  background: var(--signal-raised);
}
.signal-home-pocket .signal-part > .signal-list > .signal-item {
  padding-inline: 1rem;
}
.signal-home-pocket .signal-part > .signal-list > .signal-item:last-child {
  border-bottom: 0;
}
.signal-home-pocket .signal-thing-name {
  font-family: var(--signal-font);
  font-size: var(--signal-size-base);
  font-weight: 700;
  letter-spacing: 0;
}
.signal-home-pocket .signal-quiet {
  gap: 0;
}
.signal-quiet-press {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 0 1rem;
  color: var(--signal-muted);
  list-style: none;
  cursor: pointer;
}
.signal-quiet-press::-webkit-details-marker {
  display: none;
}
.signal-quiet[open] > .signal-quiet-press > .signal-sign {
  transform: rotate(180deg);
}
.signal-quiet > .signal-list {
  border-top: 1px solid var(--signal-line);
}
.signal-quiet > .signal-list > .signal-item {
  padding-inline: 1rem;
}
.signal-quiet > .signal-list > .signal-item:last-child {
  border-bottom: 0;
}
.signal-home-pocket .signal-turns {
  margin: 0;
}
.signal-home-pocket .signal-turns .signal-action {
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
}
.signal-home-pocket > .signal-opens {
  border-top: 0;
}
.signal-home-pocket .signal-opens-press {
  padding: 0 1rem;
  border: 1px solid var(--signal-line);
  border-radius: 1.125rem;
  background: var(--signal-raised);
  font-family: var(--signal-font);
  font-size: var(--signal-size-base);
}
.signal-home-pocket > .signal-empty {
  border-radius: 1.125rem;
}
.signal-root:has(> .signal-home-pocket) {
  padding-bottom: 5.5rem;
}
@container signal-site (min-width: 46rem) {
  .signal-home-pocket {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(42rem + 2 * var(--signal-edge, var(--signal-gutter)));
    margin-inline: auto;
  }
}

/* The line's one field, the place's name, beside its press. */
.signal-line-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.signal-line-name .signal-field {
  flex: 1 1 8rem;
  width: auto;
  min-height: 2.25rem;
  font-size: var(--signal-size-small);
}
/* A field of the line has no words over it, so its own are shown inside it while it is empty. */
.signal-line-name .signal-field::placeholder {
  color: var(--signal-muted);
}
/* The link a move gave: a field read and selected, never typed in, in the mono on the sunken ground, beside its copy. */
.signal-moved {
  align-items: stretch;
}
/* Its words, seen over the field, since a field holding the link shows no words of its own. */
.signal-moved-say {
  margin: 0 0 0.375rem;
  padding: 0;
  color: var(--signal-muted);
  font-size: var(--signal-size-small);
  line-height: 1.3;
}
.signal-field.signal-copy {
  min-width: 0;
  background: var(--signal-sunken);
  color: var(--signal-text);
  font-family: var(--signal-font-mono);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
}
.signal-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--signal-text);
  font-size: var(--signal-size-small);
  font-weight: 600;
}
.signal-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.signal-rail-foot {
  display: grid;
  gap: 0.75rem;
}
.signal-shell-main {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  min-width: 0;
  padding: 1.5rem var(--signal-gutter) 2.5rem;
  --signal-edge: 0px;
}
@container signal-site (min-width: 52rem) {
  .signal-shell {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .signal-rail {
    align-content: start;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    border-inline-end: 1px solid var(--signal-line);
    border-bottom: 0;
  }
  .signal-rail-list {
    display: grid;
    overflow: visible;
  }
  .signal-rail-list::before {
    position: absolute;
    inset-block: 1.375rem;
    inset-inline-start: calc(0.3125rem - 1px);
    width: 2px;
    background: var(--signal-filament);
    content: '';
  }
  .signal-rail-item + .signal-rail-item::before {
    display: none;
  }
  .signal-rail-step {
    width: 100%;
  }
  .signal-rail-foot {
    padding-top: 1.5rem;
    border-top: 1px solid var(--signal-line);
  }
  .signal-shell-main {
    padding: 2.5rem 2.5rem 3rem;
  }
}

/* A place's page laid as one frame: its parts one after another, as with no frame, each its own root. */
.signal-place-page {
  display: block;
  min-width: 0;
}
/* A place's page, by the nine standard parts: a head, then a region for each seat, ruled above. The places' fold
   stands at the head's start, as the conversation's bar lays it, so the way out the home lays at the top's end over the
   page never stands on it. */
.signal-place-head {
  --signal-fold-start: 0;
  display: grid;
  gap: 0.75rem;
  padding-bottom: 1.5rem;
}
.signal-region {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding-block: 1.5rem;
  border-top: 1px solid var(--signal-line);
}
/* A page of parts keeps its own gutter: around a far lobe the home draws no frame, so nothing around the
   page lays one, and each part stands in from the glass by itself. Where a frame or an app does lay the gutter, it
   says so to all it holds, `--signal-edge` none, and no gutter is laid twice. */
.signal-place-head,
.signal-region,
.signal-act,
.signal-loader,
.signal-root > .signal-pill {
  margin-inline: var(--signal-edge, var(--signal-gutter));
}
@container signal-site (min-width: 46rem) {
  .signal-page,
  .signal-place-head,
  .signal-region,
  .signal-act,
  .signal-loader,
  .signal-root > .signal-pill {
    --signal-gutter: 2rem;
  }
}
.signal-rows {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--signal-line-strong);
  list-style: none;
}
.signal-row-item {
  border-bottom: 1px solid var(--signal-line);
}
.signal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--signal-text);
  font-family: var(--signal-font);
  font-size: 1rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.signal-row:hover {
  color: var(--signal-accent);
}
.signal-shown {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem 1.5rem;
  margin: 0;
  padding: 0 0.25rem 0.5rem;
}
.signal-shown-label {
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  letter-spacing: 0.02em;
}
.signal-shown-text {
  margin: 0 0 0.5rem;
  color: var(--signal-body);
  overflow-wrap: anywhere;
}
.signal-empty {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  margin: 0;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--signal-line-strong);
  border-radius: var(--signal-radius-card);
  color: var(--signal-muted);
  font-size: var(--signal-size-small);
}
.signal-thing-name {
  margin: 0;
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.signal-status {
  max-width: var(--signal-measure);
  margin: 0;
  color: var(--signal-text);
  font-size: var(--signal-size-lead);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.signal-failed {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 1.25rem 1rem;
  border: 1px solid color-mix(in srgb, var(--signal-danger) 50%, transparent);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
}
.signal-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 0.5rem;
}
.signal-said {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--signal-line-strong);
  list-style: none;
}
.signal-saying {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem 1.5rem;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--signal-line);
}
.signal-from {
  color: var(--signal-accent);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.signal-saying-text {
  color: var(--signal-body);
  overflow-wrap: anywhere;
}
/* The person's own saying stands apart, on the accent's wash; when it was said, small, as a byte is. */
.signal-saying.signal-own {
  background: color-mix(in srgb, var(--signal-accent) 8%, transparent);
}
.signal-own > .signal-from {
  color: var(--signal-text);
}
.signal-when {
  color: var(--signal-subtle);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  letter-spacing: 0.02em;
}
.signal-saying > .signal-when {
  grid-column: -2 / -1;
}
.signal-day {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.25rem 0.375rem;
  color: var(--signal-muted);
}
.signal-day::after {
  flex: 1;
  height: 1px;
  background: var(--signal-line);
  content: '';
}
@container signal-site (min-width: 34rem) {
  .signal-shown,
  .signal-saying {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

/* `loader`: the wait, its pulse on a filament, and under it the method being read. */
.signal-loader {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  justify-items: center;
  min-height: 9rem;
}
.signal-loader-words {
  margin: 0;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The port's note, which stands in the site's own element beside the screen. */
[data-quo-note] {
  max-width: var(--signal-measure);
  margin: 0;
  padding: 1rem var(--signal-gutter) 1.5rem;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  line-height: 1.5;
}

/* ---- The pocket's drawing: what a part draws where the window hands `size` `compact`, and what a
   narrow room or a coarse pointer asks of every screen. One relation drawn twice, never one drawing resized. ---- */

/* `head` in a pocket: the conversation's bar, held at the head of the screen on the raised ground while the page
   runs under it: the places folded at its start, then the place's name, small, over its lead. Its end stands clear,
   for the way out where an owner stands it at the head. The lead keeps two lines there, whole to a reader that
   listens. */
.signal-root:has(> .signal-place-pocket) {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--signal-line);
  background: var(--signal-raised);
}
.signal-place-pocket {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    'fold line .'
    'words words words';
  gap: 0.25rem 0;
  align-items: center;
  min-height: 3.75rem;
  margin-inline: 0;
  padding: 0.375rem var(--signal-edge, var(--signal-gutter)) 0.5rem;
}
/* The bar's first row holds the places' fold and the line's at its start and the way out's two pills at its end, a
   row of their height, so no word of the place stands under the pills, however long they read in the person's
   language; the place's words stand under them, the whole width. */
.signal-place-pocket::before {
  content: '';
  grid-row: 1;
  grid-column: 1 / -1;
  min-height: 2.75rem;
}
.signal-place-pocket > .signal-place-fold {
  grid-area: fold;
}
.signal-place-pocket > .signal-place-line-fold {
  grid-area: line;
}
/* The line in a place's own bar: its press a sign as the frame's, its body a card that lies over the talk from the
   bar's start, so it never stands under the way out's pills. */
.signal-place-line-fold {
  position: static;
  flex: none;
}
.signal-place-line-press {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 999px;
  color: var(--signal-muted);
  list-style: none;
  cursor: pointer;
}
.signal-place-line-press::-webkit-details-marker {
  display: none;
}
.signal-place-line-press .signal-sign {
  width: 1.375rem;
  height: 1.375rem;
  stroke-width: 2.25;
}
.signal-place-line-press:hover,
.signal-place-line-fold[open] > .signal-place-line-press {
  color: var(--signal-text);
}
.signal-place-line-press:focus-visible {
  outline: 2px solid var(--signal-accent);
  outline-offset: 2px;
}
.signal-place-line-body {
  position: absolute;
  top: calc(100% + 0.25rem);
  inset-inline: var(--signal-edge, var(--signal-gutter));
  z-index: 3;
  display: grid;
  gap: 0.75rem;
  box-sizing: border-box;
  max-width: 28rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.875rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
  box-shadow: var(--signal-shadow);
}
/* In a pocket the line opens as a sheet from the foot, over the page dimmed: the dim is the fold's own press laid over
   the screen, so a press on it closes the fold as a phone's sheet closes. At a desk the card stays, lifted by its
   shadow. The sheet stands the measure wide on a tablet, and clear of the home indicator. */
.signal-place-pocket > .signal-place-line-fold[open] > .signal-place-line-press::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 4;
  background: rgb(0 0 0 / 0.36);
  cursor: default;
}
.signal-place-pocket > .signal-place-line-fold > .signal-place-line-body {
  position: fixed;
  top: auto;
  bottom: 0;
  inset-inline: 0;
  z-index: 5;
  max-width: 40rem;
  max-height: 80vh;
  margin-inline: auto;
  padding: 1.25rem var(--signal-gutter) calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border-width: 1px 1px 0;
  border-radius: var(--signal-radius-card) var(--signal-radius-card) 0 0;
  overscroll-behavior: contain;
}
.signal-place-pocket > .signal-place-line-fold > .signal-place-line-body::before {
  content: '';
  justify-self: center;
  width: 2.25rem;
  height: 0.3125rem;
  margin-block: -0.5rem 0.125rem;
  border-radius: 999px;
  background: var(--signal-line-strong);
}
.signal-place-words {
  display: grid;
  grid-area: words;
  gap: 0.0625rem;
  min-width: 0;
}
.signal-place-name {
  margin: 0;
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: var(--signal-size-base);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
/* Who the person is at the place: the name they go by, what they stand as, quiet beside the place's name in the bar
   and under the title at a desk. */
.signal-place-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  min-width: 0;
}
.signal-place-me {
  min-width: 0;
  margin: 0;
  color: var(--signal-muted);
  font-size: var(--signal-size-small);
  font-weight: 500;
  line-height: 1.2;
}
.signal-place-head:not(.signal-place-pocket) {
  padding-top: 1.5rem;
}
@container signal-site (min-width: 46rem) {
  .signal-place-head:not(.signal-place-pocket) {
    padding-top: 2.5rem;
  }
}
.signal-place-head:not(.signal-place-pocket) > .signal-place-me {
  font-size: var(--signal-size-base);
}
/* At a desk the place's name is the title and what the place says it is stands under it, its lead, whole and within a
   measure, as the conversation's bar keeps it under the name. */
.signal-place-about {
  max-width: var(--signal-measure);
  margin: 0;
  color: var(--signal-body);
  font-size: var(--signal-size-lead);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.signal-place-lead {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--signal-body);
  font-size: var(--signal-size-small);
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
/* A phone held sideways leaves the screen short: there the bar keeps the place's name alone, its lead kept for a
   reader that listens, and the thread's line stands closer, so the talk keeps the room. */
@media (max-height: 30rem) {
  .signal-place-pocket {
    grid-template-areas: 'fold line words';
    min-height: 3rem;
    padding-block: 0.25rem;
  }
  .signal-place-pocket::before {
    grid-column: 1 / -1;
    min-height: 2.5rem;
  }
  /* Sideways the bar is one row and wide: the name keeps clear of the way out's two pills, the longest the home says. */
  .signal-place-words {
    padding-inline-end: 18rem;
  }
  .signal-place-pocket .signal-place-lead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .signal-root:has(> .signal-talk)
    + .signal-root
    > .signal-region:has(.signal-field-row:first-child:nth-last-child(2)) {
    padding-block: 0.375rem;
  }
}

/* The fold in the bar: its press a plate of 2.75rem at the bar's start, the mark of what waits at its corner, and the
   places a card that lies over the page, never pushing the bar. The switcher is drawn in a root of its own under a
   host of the screen's, which no selector of the bar reaches, so the bar says its dress by properties, which a root
   inherits, and the switcher's own rules read them. Its root is as wide as its press, so its own room never lays the
   fold open here, whatever the screen's width; and where the person holds one place alone no switcher is drawn, the room is none and the name stands at the bar's start. */
.signal-place-fold {
  flex: none;
  --signal-fold-room: 2.75rem;
  --signal-fold-after: 0.75rem;
  --signal-fold-ground: transparent;
  --signal-fold-edge: 1px solid var(--signal-line-strong);
  --signal-fold-corner: 0.75rem;
  --signal-fold-ink: var(--signal-text);
  --signal-fold-waits: absolute;
  --signal-fold-card: absolute;
  --signal-fold-card-room: 18rem;
  --signal-fold-card-most: 70vh;
  --signal-fold-card-shadow: var(--signal-shadow);
}

/* `switcher`: one fold. Narrow, its press is a mark of 3rem, and each place a row a thumb finds; wide, the fold lies
   open and the places are the chips they were. An engine that cannot lay a fold open keeps the fold. */
.signal-root:has(> .signal-places-fold) {
  width: var(--signal-fold-room, auto);
  background: var(--signal-fold-ground, var(--signal-surface));
  margin-inline-end: var(--signal-fold-after, 0);
}
.signal-places-fold {
  position: relative;
}
.signal-places-press {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  box-sizing: border-box;
  width: var(--signal-fold-room, 3rem);
  min-height: var(--signal-fold-room, 3rem);
  margin-inline-start: var(--signal-fold-start, auto);
  border: var(--signal-fold-edge, 0);
  border-radius: var(--signal-fold-corner, 999px);
  color: var(--signal-fold-ink, var(--signal-muted));
  font-size: var(--signal-size-base);
  list-style: none;
  cursor: pointer;
}
.signal-places-press .signal-sign {
  width: 1.375rem;
  height: 1.375rem;
}
.signal-places-press::-webkit-details-marker {
  display: none;
}
.signal-places-press:hover {
  color: var(--signal-text);
}
.signal-places-waits {
  position: var(--signal-fold-waits, static);
  top: 0.3125rem;
  inset-inline-end: 0.3125rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--signal-accent);
  box-shadow: 0 0 10px var(--signal-glow);
}
.signal-places-fold .signal-places {
  position: var(--signal-fold-card, static);
  top: calc(100% + 0.25rem);
  inset-inline-start: 0;
  z-index: 3;
  box-sizing: border-box;
  width: var(--signal-fold-card-room, auto);
  max-width: calc(100vw - 2rem);
  max-height: var(--signal-fold-card-most, none);
  overflow-y: auto;
  box-shadow: var(--signal-fold-card-shadow, none);
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 0.25rem;
  padding: 0.375rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
}
.signal-places-fold .signal-place {
  justify-content: flex-start;
  width: 100%;
  min-height: 3rem;
  border: 0;
  border-radius: var(--signal-radius);
  background: none;
  font-size: var(--signal-size-base);
  font-weight: 400;
  text-align: start;
}
.signal-places-fold .signal-place-through {
  margin-inline-start: auto;
}
.signal-places-fold .signal-place:hover {
  background: var(--signal-raised-strong);
}
.signal-places-fold .signal-place-still:hover {
  background: none;
}
@supports selector(::details-content) {
  @container signal-site (min-width: 30rem) {
    .signal-places-press {
      display: none;
    }
    .signal-places-fold::details-content {
      content-visibility: visible;
    }
    .signal-places-fold .signal-places {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0;
      padding: 0;
      border: 0;
      background: none;
    }
    .signal-places-fold .signal-place-through {
      margin-inline-start: 0;
    }
    .signal-places-fold .signal-place {
      justify-content: flex-start;
      width: auto;
      min-height: 2.25rem;
      border: 1px solid var(--signal-line-strong);
      border-radius: 999px;
      background: var(--signal-raised);
      font-size: var(--signal-size-small);
      font-weight: 600;
    }
  }
}

/* The rail: on a tablet turned, the expanded class, the conversation's places leave the bar's fold and stand as a rail
   at the screen's start, hung from the bar's foot whatever the bar's height, beside the talk, which keeps its column in
   the middle and the room the rail leaves it. Upright the column leaves no room for one, and the fold stays. The
   switcher reads the rail by a property its root inherits, as it reads the bar's dress, lies open there, its places rows
   a thumb finds, and draws the rail's own ground itself: where the person holds one place alone no switcher is drawn,
   the slot's host stands empty, and no rail stands. */
@media (min-width: 62.5rem) {
  /* No grid area, so the bar whole is what it hangs from: a grid's child placed in an area would hang from that area. */
  .signal-place-pocket > .signal-place-fold {
    grid-area: auto;
    position: absolute;
    inset-block-start: calc(100% + 1px);
    inset-inline-start: 0;
    z-index: 1;
    width: 15rem;
    height: calc(100dvh - 100% - 1px - env(safe-area-inset-top, 0px));
    pointer-events: none;
    --signal-fold-rail: rail;
    --signal-fold-room: 100%;
    --signal-fold-after: 0;
    --signal-fold-card: static;
    --signal-fold-card-room: 100%;
    --signal-fold-card-most: none;
    --signal-fold-card-shadow: none;
  }
  .signal-place-pocket .signal-place-fold > * {
    height: 100%;
  }
}
@container style(--signal-fold-rail: rail) {
  .signal-root:has(> .signal-places-fold) {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    padding: 0.75rem;
    border-inline-end: 1px solid var(--signal-line);
    background: var(--signal-surface);
    pointer-events: auto;
  }
  .signal-places-press {
    display: none;
  }
  .signal-places-fold::details-content {
    content-visibility: visible;
  }
  .signal-places-fold .signal-places {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: none;
  }
}

/* `conversation` in a pocket: the talk. Its name is kept for a reader that listens, and no rule stands over it: the
   bar is its head. Each saying is a plate under who said it and when, on one line; a plate keeps most of the room's
   width and never more than a measure, so a tablet's thread reads as a phone's does. */
.signal-region.signal-talk {
  padding-block: 1rem 0.75rem;
  border-top: 0;
}
.signal-talk > .signal-part-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.signal-thread {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-thread-saying {
  display: grid;
  justify-items: start;
  gap: 0.25rem;
  min-width: 0;
  /* The saying a talk opens at is brought into view clear of the bar held at the head and the thread's line held at
     the foot. */
  scroll-margin-block: 6rem;
}
.signal-thread-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.375rem;
  max-width: 100%;
  margin: 0;
  padding-inline: 0.25rem;
  color: var(--signal-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}
.signal-thread-from {
  min-width: 0;
  overflow-wrap: anywhere;
}
.signal-thread-who > .signal-when {
  color: inherit;
  font: inherit;
  font-weight: 500;
  letter-spacing: 0;
}
.signal-thread-who > .signal-when::before {
  margin-inline-end: 0.375rem;
  content: '\b7';
}
.signal-thread-text {
  max-width: min(85%, 26rem);
  margin: 0;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--signal-line);
  border-radius: 1.125rem;
  border-end-start-radius: 0.375rem;
  background: var(--signal-raised);
  color: var(--signal-text);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* The person's own, in a thread: set to the end, its plate on the accent's wash, its small corner at the end. */
.signal-thread-saying.signal-own {
  justify-items: end;
}
.signal-thread-saying.signal-own > .signal-thread-text {
  border-color: transparent;
  border-end-start-radius: 1.125rem;
  border-end-end-radius: 0.375rem;
  background: color-mix(in srgb, var(--signal-accent) 16%, var(--signal-raised));
}
.signal-thread > .signal-day {
  justify-content: center;
  padding: 0.375rem 0 0;
}
.signal-thread > .signal-day > .signal-when {
  color: var(--signal-body);
  font-family: var(--signal-font);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
}
.signal-thread > .signal-day::after {
  display: none;
}

/* `rows`, `item` and `state` in a pocket: one of the place's objects in the talk. A card on the raised
   ground, as a saying's plate is and no wider than a measure, its name a strong line at its head with no filament
   running out, its rows ruled inside it. It keeps no rule over it: a card is its own edge. */
.signal-region.signal-object {
  box-sizing: border-box;
  justify-self: start;
  width: min(100% - 2 * var(--signal-edge, var(--signal-gutter)), 26rem);
  margin-block: 0.75rem 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--signal-line);
  border-radius: 1.125rem;
  background: var(--signal-raised);
  gap: 0.5rem;
}
.signal-object > .signal-part-name {
  color: var(--signal-text);
  font-family: var(--signal-font);
  font-size: var(--signal-size-small);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.signal-object > .signal-part-name::after {
  content: none;
}
.signal-region.signal-object:has(> .signal-rows) {
  padding-bottom: 0.25rem;
}
.signal-object > .signal-rows {
  border-top-color: var(--signal-line);
}
.signal-object > .signal-rows > .signal-row-item:last-child {
  border-bottom: 0;
}
.signal-object .signal-row {
  padding-inline: 0;
}
.signal-object .signal-shown {
  padding-inline: 0;
}
.signal-object > .signal-status {
  font-size: var(--signal-size-base);
}
.signal-object > :is(.signal-empty, .signal-failed) {
  padding: 0.5rem 0;
  border: 0;
  background: none;
}

/* The tablet's flavour: in a room of 46rem and more the talk, the thread's line and the place's objects
   keep one column in the middle of the screen, 42rem and never the screen's width, so a saying, a card and the line
   a person writes on stand under one another as they do on a phone, and the bar alone runs edge to edge. */
@container signal-site (min-width: 46rem) {
  .signal-region.signal-talk,
  .signal-region.signal-object,
  .signal-act.signal-act-wide,
  .signal-root:has(> .signal-talk)
    + .signal-root
    > .signal-region:has(.signal-field-row:first-child:nth-last-child(2)) {
    margin-inline: max(var(--signal-edge, var(--signal-gutter)), (100% - 42rem) / 2);
  }
  /* A card and the page's one press take the column's width, as they take the screen's on a phone, so a page of the
     place's objects alone stands in the middle and none hangs on one side; a saying keeps its measure. */
  .signal-region.signal-object {
    justify-self: stretch;
    width: auto;
  }
}

/* `form` in a pocket: a card as a list's is, its fields in a column as wide as the card, and its press the card's
   width, a thumb's height, the page's one thing in the card. */
.signal-object > .signal-fields {
  max-width: none;
}
.signal-object > .signal-fields > .signal-actions > li {
  flex: 1;
}
.signal-object > .signal-fields .signal-action {
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  font-size: var(--signal-size-base);
}

/* `action` in a pocket: a press as wide as its room, 3.25rem high, on a phone the screen's and in a tablet's room
   the column's. It stands as a card does, 0.75rem under what comes before it, so the talk keeps one rhythm. */
.signal-act.signal-act-wide {
  margin-block: 0.75rem 0;
  padding-block: 0;
}
/* The page's last part in a pocket keeps room under it, so it scrolls clear of the way out the home lays over the
   page's foot. */
/* The thread's line ends the talk's own section, never the page, and keeps no room under it. */
.signal-root:last-child:has(> .signal-object, > .signal-act-wide, > .signal-talk):not(
    .signal-root:has(> .signal-talk) + .signal-root
  ) {
  padding-bottom: 5.5rem;
}
.signal-act-wide .signal-action {
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  font-size: var(--signal-size-base);
}

/* On a touch screen the home lays its way out at the top's end over the page, as a store's app names it: a lobe's page,
   a place that seats nothing among them, keeps the room of its two pills above its first element, as a page of no
   design does. */
@media (pointer: coarse) {
  .signal-lobe-page {
    padding-top: 4.5rem;
  }
}

/* A consent the home asks, a link's among them, on a touch screen keeps the room of the way out's two pills above its
   first line, as a lobe's page does, so its words never stand under them where the page lays it at the top. */
@media (pointer: coarse) {
  .signal-consent {
    padding-top: 4.5rem;
  }
}

/* A press a thumb finds: 3rem wherever the pointer is coarse, a phone and a tablet alike. */
@media (pointer: coarse) {
  .signal-action,
  .signal-action-small,
  .signal-place,
  .signal-about-press,
  .signal-row {
    min-height: 3rem;
  }
  .signal-check {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.signal-link:focus-visible,
.signal-about-press:focus-visible,
.signal-write-press:focus-visible,
.signal-rail-step:focus-visible,
.signal-place:focus-visible,
.signal-places-press:focus-visible,
.signal-row:focus-visible {
  outline: 2px solid var(--signal-accent);
  outline-offset: 2px;
}

/* A field's words stand over it, so the same words inside it are not shown, */
.signal-field::placeholder {
  color: transparent;
}
/* but at the end of a thread in a pocket. The window stands the form that adds a saying after the
   talk, in one section with it; where it is one field it is the thread's one line, held at the foot of the screen on
   the raised ground while the thread is read: no name, no rule, the field's words inside it, and its press a round
   one beside it, whose word is kept for a reader that listens and whose sign, an arrow up, is the sheet's own. What
   the press was answered is kept for that reader too, since the thread shows the saying. A form of more fields
   stays a form. */
.signal-root:has(> .signal-talk) + .signal-root:has(.signal-field-row:first-child:nth-last-child(2)) {
  position: sticky;
  bottom: 0;
  z-index: 1;
  border-top: 1px solid var(--signal-line);
  background: var(--signal-raised);
}
.signal-root:has(> .signal-talk) + .signal-root > .signal-region:has(.signal-field-row:first-child:nth-last-child(2)) {
  justify-self: stretch;
  width: auto;
  margin-block: 0;
  padding-block: 0.625rem;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.signal-root:has(> .signal-talk)
  + .signal-root
  > .signal-region:has(.signal-field-row:first-child:nth-last-child(2))
  > :is(.signal-part-name, .signal-help, .signal-told),
.signal-root:has(> .signal-talk)
  + .signal-root
  .signal-field-row:first-child:nth-last-child(2)
  > :is(.signal-label, .signal-help) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.signal-root:has(> .signal-talk) + .signal-root .signal-fields:has(> .signal-field-row:first-child:nth-last-child(2)) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: none;
}
.signal-root:has(> .signal-talk) + .signal-root .signal-field-row:first-child:nth-last-child(2) {
  flex: 1;
  min-width: 0;
}
.signal-root:has(> .signal-talk) + .signal-root .signal-field-row:first-child:nth-last-child(2) > .signal-field {
  min-height: 3rem;
  padding-inline: 1.125rem;
  border-color: var(--signal-line);
  border-radius: 1.5rem;
  background: var(--signal-surface);
}
.signal-root:has(> .signal-talk)
  + .signal-root
  .signal-field-row:first-child:nth-last-child(2)
  > .signal-field::placeholder {
  color: var(--signal-muted);
}
.signal-root:has(> .signal-talk) + .signal-root .signal-field-row:first-child:nth-last-child(2) + .signal-actions {
  flex: none;
}
.signal-root:has(> .signal-talk)
  + .signal-root
  .signal-field-row:first-child:nth-last-child(2)
  + .signal-actions
  .signal-action {
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
}
.signal-root:has(> .signal-talk)
  + .signal-root
  .signal-field-row:first-child:nth-last-child(2)
  + .signal-actions
  .signal-action::before {
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  content: '';
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13V3M3.5 7.5 8 3l4.5 4.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13V3M3.5 7.5 8 3l4.5 4.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
/* The part after a talk stands under the thread's line, which rules it: it keeps no rule of its own. Nor does the
   part after a card, whose edge is its own. */
:is(.signal-root, section):has(> .signal-root > .signal-talk, > .signal-talk) + .signal-root > .signal-region,
.signal-root:has(> .signal-object) + .signal-root > .signal-region {
  border-top: 0;
}

/* A place's own tree: a place with no design of its own draws standard elements and no
   class, and the home's design dresses it, so no page a person meets stands in the engine's bare controls. Only a
   root whose first element carries no class is dressed so, never one that holds another root, as the window's
   own around a place, whose place stands as wide as it is laid, what the window lays after it, the line, a column of
   its own, nor one that holds an element of a class, as the window's around a page of parts, nor an empty one, as a
   switcher's where the person holds one place, never a home's card nor its head, which `cards.css` dresses, never the way out's own roots,
   and every rule is of no weight, `:where`, so a class of
   Signal's and the home's cards keep their own. The page is one column at the measure: its words in the face and ink
   of the design, a field as a form's is, a press an outlined pill. */
:where(
  :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
    > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
  :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
    > :has(> nervur-lobe)
    > :not([class], nervur-lobe)
) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  box-sizing: border-box;
  max-width: var(--signal-measure);
  margin-inline: auto;
  padding: 1.5rem var(--signal-gutter);
  color: var(--signal-body);
  font-family: var(--signal-font);
  font-size: calc(var(--signal-size-base) * var(--access-text-size, 1));
  line-height: calc(1.6 * var(--access-leading, 1));
  overflow-wrap: anywhere;
  color-scheme: var(--signal-scheme);
  -webkit-font-smoothing: antialiased;
}
/* On a touch screen the home lays its way out at the top's end over the page, as a store's app names it: a page of
   no design keeps the room of its two pills above its first element, as the conversation's bar keeps its end. */
@media (pointer: coarse) {
  :where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty)
  ) {
    padding-top: 4.5rem;
  }
}
/* What the window lays after a place, its folds, stands as one column under the place: each fold a close step from the
   next, the room of a page only above the first and below the last. */
:where(
  :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
    > :has(> nervur-lobe)
    > :not([class], nervur-lobe)
) {
  padding-block: 0.25rem;
}
:where(
  :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
    > :has(> nervur-lobe)
    > nervur-lobe
    + :not([class])
) {
  padding-top: 1.25rem;
}
:where(
  :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
    > :has(> nervur-lobe)
    > :not([class], nervur-lobe):last-child
) {
  padding-bottom: 1.5rem;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(h1, h2, h3, h4) {
  margin: 0.5rem 0 0;
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  line-height: 1.2;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(p, ul, ol) {
  margin: 0;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(ul, ol) {
  padding-inline-start: 1.25rem;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(ul:empty, ol:empty) {
  display: none;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(a) {
  color: var(--signal-accent);
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(img) {
  max-width: 100%;
  height: auto;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(label) {
  display: grid;
  gap: 0.375rem;
  width: 100%;
  color: var(--signal-text);
  font-size: var(--signal-size-small);
  font-weight: 600;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']), textarea, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: var(--signal-radius);
  background: var(--signal-raised);
  color: var(--signal-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(textarea) {
  min-height: 6rem;
  padding-block: 0.625rem;
  resize: vertical;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--signal-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--signal-text);
  font-family: var(--signal-font);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(button:hover) {
  border-color: var(--signal-text);
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(:focus-visible) {
  outline: 2px solid var(--signal-accent);
  outline-offset: 2px;
}

/* A field focused is ringed once: the ring stands over its border, never beside it. */
.signal-field:focus-visible,
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(input, textarea, select):focus-visible {
  outline-offset: -1px;
}

/* What the window lays itself after a tree, the line and the person's places: each group a quiet
   card under its legend, the themes a row of pills with the one chosen in the accent and its word quiet beside its
   name, the places a list, the one stood on in the text's ink and marked by the home's word. */
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(details) {
  width: 100%;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(summary) {
  min-height: 2.75rem;
  color: var(--signal-text);
  font-weight: 600;
  line-height: 2.75rem;
  cursor: pointer;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(details > section, details > nav) {
  display: grid;
  gap: 0.75rem;
  padding-block: 0.5rem;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(fieldset) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0.75rem 1rem 1rem;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius-card);
  background: var(--signal-raised);
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(legend) {
  padding-inline: 0.25rem;
  color: var(--signal-text);
  font-size: var(--signal-size-small);
  font-weight: 600;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(button[aria-pressed='true']) {
  gap: 0.5rem;
  border-color: var(--signal-accent);
  color: var(--signal-accent);
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(button small, li small) {
  color: var(--signal-body);
  font-size: var(--signal-size-small);
  font-weight: 400;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(nav > ul) {
  display: grid;
  gap: 0.25rem;
  padding: 0;
  list-style: none;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(nav > ul > li) {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 2.75rem;
  line-height: 2.75rem;
}
:where(
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :not([class], link, [data-quo-card], :has(+ [data-quo-card]), :has(> nervur-lobe), :has(> [class]), :empty),
    :host(:not(nervur-way-out, nervur-way-line, nervur-said, nervur-asked))
      > :has(> nervur-lobe)
      > :not([class], nervur-lobe)
  )
  :where(a[aria-current='page']) {
  color: var(--signal-text);
  font-weight: 600;
  text-decoration: none;
}

/* The tablet's flavour: the home's own page in a pocket and a consent the home asks keep one column in the
   middle of the screen, the consent's words' width and its room, never the screen's. */
@container signal-site (min-width: 46rem) {
  .signal-home-pocket,
  .signal-frame-asking > .signal-consent,
  .signal-frame-pocket > .signal-consent {
    box-sizing: border-box;
    width: auto;
    margin-inline: max(var(--signal-edge, var(--signal-gutter)), (100% - var(--signal-measure)) / 2);
  }
}

/* A part of the home's own page headed by the home's word for it reads as a heading, in the design's
   face, never an eyebrow of capitals: what the person does at home is said in their words. */
.signal-part-name.signal-part-heading {
  color: var(--signal-text);
  font-family: var(--signal-font);
  font-size: var(--signal-size-small);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}