/* Signal's lobes' layer, the home's cards (SCREEN-29, SCREEN-7): what a page says to a person inside its own element,
   the wait, the consent to a link, a word said, a try again. The port draws each of standard elements alone, under a
   `header` naming the home, in a root that wears this layer, and marks it `data-quo-card`; no class stands there, so
   every rule names that mark. The room is the port's, no root of Signal's, so a card lays its own type and measure.
   The home's name is an eyebrow over a filament, the yes the page's one thing in the accent, the no and the roads to
   another home outlined, the wait a pulse on a filament. */

header:has(+ [data-quo-card]) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-sizing: border-box;
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
  color: var(--signal-accent);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
header:has(+ [data-quo-card])::after {
  flex: 1;
  min-width: 1.5rem;
  height: 2px;
  border-radius: 1px;
  background: var(--signal-filament);
  content: '';
}

[data-quo-card] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 0.5rem;
  box-sizing: border-box;
  max-width: 36rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  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;
}
[data-quo-card] > * {
  box-sizing: border-box;
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}
[data-quo-card] > h1 {
  color: var(--signal-text);
  font-family: var(--signal-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
[data-quo-card] > p:empty {
  display: none;
}

/* What the link offers (QUO-23), the place's own word and never the home's: its lines on the sunken ground, in the
   mono, as data is shown; how long it waits and lives, quiet; a place not reached, said as a warning is. */
[data-quo-card] > [data-quo-offer] {
  color: var(--signal-muted);
  font-size: var(--signal-size-small);
}
[data-quo-card] > [data-quo-offer='intro'] {
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  letter-spacing: 0.04em;
}
[data-quo-card] > [data-quo-offer='says'] {
  display: grid;
  gap: 0.375rem;
  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;
  list-style: none;
}
[data-quo-card] [data-quo-offer='more'] {
  color: var(--signal-muted);
}
[data-quo-card] > [data-quo-offer='unreached'] {
  padding: 0.625rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--signal-danger) 50%, transparent);
  border-radius: var(--signal-radius);
  background: var(--signal-raised);
  color: var(--signal-text);
}

/* The person's own words on the place, and the home that keeps it: a label over its field. */
[data-quo-card] > [data-quo-words] {
  display: grid;
  gap: 0.375rem;
  color: var(--signal-text);
  font-size: var(--signal-size-small);
  font-weight: 600;
}
[data-quo-card] [data-quo-words='field'],
[data-quo-card] [data-quo-words='homes'] {
  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;
}
[data-quo-card] [data-quo-words='field'] {
  min-height: 6rem;
  padding-block: 0.625rem;
  resize: vertical;
}

/* The presses: an action is a pill. The yes wears the accent, the page's one thing; any other is outlined. */
[data-quo-card] > [type='submit'],
[data-quo-card] > [type='button'],
[data-quo-card] > [data-quo-road='home'] {
  display: inline-flex;
  flex: 0 1 auto;
  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;
  text-decoration: none;
  cursor: pointer;
}
[data-quo-card] > [type='button']:hover,
[data-quo-card] > [data-quo-road='home']:hover {
  border-color: var(--signal-text);
}
[data-quo-card] > [type='submit'] {
  order: 1;
  border-color: var(--signal-accent);
  background: var(--signal-accent);
  color: var(--signal-on-accent);
  box-shadow: 0 0 24px -6px var(--signal-glow);
}
[data-quo-card] > [type='submit']:hover {
  filter: brightness(1.08);
}
[data-quo-card] > [type='submit'] + [type='button'] {
  order: 2;
}
[data-quo-card] :focus-visible {
  outline: 2px solid var(--signal-accent);
  outline-offset: 2px;
}

/* The consent's order: what is read and written, its two presses, then the roads to another home, quieter and ruled
   off: their line, the link and its copy as small pills, the code to scan on its own white, as a scanner reads it. */
[data-quo-card='consent'] > p,
[data-quo-card] > [data-quo-road] {
  order: 3;
  color: var(--signal-muted);
  font-size: var(--signal-size-small);
}
[data-quo-card='consent'] > h1 + p,
[data-quo-card='consent'] > p[data-quo-offer] {
  order: 0;
}
[data-quo-card='consent'] > h1 + p {
  color: var(--signal-body);
  font-size: inherit;
}
[data-quo-card='consent'] > p:not([data-quo-offer], [data-quo-road], h1 + p) {
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--signal-line);
}
[data-quo-card='consent'] > [data-quo-road='qr'] + p {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
[data-quo-card] > [data-quo-road='home'],
[data-quo-card] > [data-quo-road='copy'] {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  color: var(--signal-text);
  font-size: var(--signal-size-small);
}
[data-quo-card] > [data-quo-road='qr'] {
  flex: 0 0 10.5rem;
  width: 10.5rem;
  height: 10.5rem;
  padding: 0.75rem;
  border: 1px solid var(--signal-line);
  border-radius: var(--signal-radius);
  background: #ffffff;
}

/* A word said and a try again: a line to read, then its presses. */
[data-quo-card='said'] > p,
[data-quo-card='again'] > p {
  color: var(--signal-text);
  font-size: var(--signal-size-lead);
  line-height: 1.4;
}

/* The wait: a pulse on a filament, and under it the home's word, in the mono. Never a spinner. */
[data-quo-card='reading'] {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  padding-block: 3rem;
  color: var(--signal-muted);
  font-family: var(--signal-font-mono);
  font-size: var(--signal-size-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-quo-card='reading']::before {
  width: 7rem;
  height: 2px;
  border-radius: 1px;
  background:
    radial-gradient(circle, var(--signal-accent) 0 2px, transparent 3px) 0 50% / 0.75rem 100% no-repeat,
    var(--signal-filament);
  content: '';
  animation: signal-card-pulse 1.6s ease-in-out infinite;
}
@keyframes signal-card-pulse {
  from {
    background-position:
      0 50%,
      0 0;
  }
  to {
    background-position:
      100% 50%,
      0 0;
  }
}

/* A press a thumb finds: 3rem wherever the pointer is coarse. */
@media (pointer: coarse) {
  [data-quo-card] > [type='submit'],
  [data-quo-card] > [type='button'],
  [data-quo-card] > [data-quo-road='home'] {
    min-height: 3rem;
  }
  [data-quo-card] > [type='submit'],
  [data-quo-card] > [type='submit'] + [type='button'] {
    flex: 1 1 8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-quo-card='reading']::before {
    animation: none;
  }
}