/* ---- The organism's screens: the window's six, the switcher and the nine standard parts (LOOK-2, LOOK-12). --------
   Signal writes no word of its own here (SCREEN-6): 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 (SCREEN-7), 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 (SCREEN-26): 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-current] {
  border-color: var(--signal-accent);
  color: var(--signal-accent);
}
.signal-turns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.signal-copy {
  margin: 0;
  padding: 0.625rem 0.875rem;
  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;
  overflow-wrap: anywhere;
}
.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 (SCREEN-6). */
.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 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 (SCREEN-26): 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 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);
}
.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, by the nine standard parts: a head, then a region for each seat, ruled above. */
.signal-place-head {
  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 (SCREEN-7): 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 (HOST-33). */
[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 (LOOK-13, SCREEN-9): 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 {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  margin-inline: 0;
  padding: 0.375rem var(--signal-edge, var(--signal-gutter));
}
.signal-place-words {
  display: grid;
  flex: 1;
  gap: 0.0625rem;
  min-width: 0;
  padding-inline-end: 6.5rem;
}
.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;
}
.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;
}
/* 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
   (SCREEN-26), 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;
  --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: 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;
    }
  }
}

/* `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;
}
.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 (LOOK-13). 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;
  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 (LOOK-13): 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);
  }
}

/* `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; in a tablet's room, as wide as a thumb's reach
   and no wider. */
.signal-act-wide .signal-action {
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  font-size: var(--signal-size-base);
}
@container signal-site (min-width: 46rem) {
  .signal-act-wide .signal-action {
    width: auto;
    min-width: 20rem;
  }
}

/* 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 (LOOK-12, LOOK-13). 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;
}