@layer components {
  /* The Vous screen (/vous): a person card, then two groups of rows; one centred column on the desktop. */
  .you-screen { display: flex; flex-direction: column; gap: 16px; margin-inline: auto; max-width: 560px; }
  .you-card {
    display: flex; align-items: center; gap: 12px; min-height: calc(var(--tap) + 24px); padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
    color: var(--foreground); text-decoration: none;
  }
  .you-card:is(:hover, :active) { background: var(--accent); text-decoration: none; }
  .you-card:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--jx-accent); }
  .you-card > svg { flex: none; color: var(--muted-foreground); }
  .you-card .you-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .you-card .you-name { font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
  .you-card .you-role { margin: 2px 0 0; font-size: var(--text-meta); color: var(--muted-foreground); }
  .you-group { display: flex; flex-direction: column; gap: 8px; }
  .you-group-title { margin: 0; padding-inline: 4px; font-size: var(--text-meta); font-weight: 600; color: var(--muted-foreground); }
  .you-screen .you-rows {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
  }
  .you-screen .you-row {
    align-items: center; gap: 12px; width: 100%; min-height: calc(var(--tap) + 2px); padding: 6px 14px;
    border: 0; background: transparent; font: inherit; text-align: start; color: var(--foreground);
    font-size: var(--text-body); text-decoration: none;
  }
  /* The install row stays hidden until the page knows the app can be installed. */
  .you-screen .you-row:not(.install-when) { display: flex; }
  .you-screen .you-row--install { display: none; }
  html[data-install] .you-screen .you-row--install { display: flex; }
  /* The Espace row is the apps': hidden until the app's bridge says it speaks the spaces component. */
  .you-screen .you-row--spaces, .you-screen .you-group--spaces { display: none; }
  html[data-bridge-components~="spaces"] .you-screen .you-group--spaces { display: flex; }
  html[data-bridge-components~="spaces"] .you-screen .you-row--spaces { display: flex; }
  /* .badge sets display, which beats the UA's [hidden]: no unread, no badge. */
  .you-screen .you-row--spaces .badge[hidden] { display: none; }
  .you-screen .you-space-initial {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: var(--space-color); color: #fff; font-size: var(--text-meta); font-weight: 600;
  }
  .you-screen .you-space-name { color: var(--foreground); font-size: var(--text-body); overflow-wrap: anywhere; }
  .you-screen .you-row + .you-row { border-top: 1px solid var(--border); }
  .you-screen .you-row-label { flex: 1; min-width: 0; }
  .you-screen .you-row-value { flex: none; color: var(--muted-foreground); font-size: var(--text-meta); }
  .you-screen .you-row-pill {
    flex: none; padding: 3px 8px; font-size: 13px; font-weight: 500; color: var(--foreground);
    background: var(--jx-wait-soft); border: 1px solid var(--jx-wait); --when-display: inline-flex;
  }
  .you-screen .you-row > svg { flex: none; color: var(--muted-foreground); }
  .you-screen a.you-row:is(:hover, :active), .you-screen button.you-row:is(:hover, :active) { background: var(--accent); }
  /* Inside the rounded list, which clips: the focus ring is drawn within the row. */
  .you-screen .you-row:focus-visible { outline-offset: -2px; }
  .you-screen .you-row-sub { display: block; color: var(--muted-foreground); font-size: var(--text-meta); line-height: 1.3; }
  .you-screen .you-row .release-dot { position: static; flex: none; box-shadow: none; }
  .you-screen .you-row--releases .release-new { flex: none; }
  /* Only a left hand mirrors the phone's bar. */
  @media (min-width: 1100px) { .you-screen .you-row.you-row--hand:not(.install-when) { display: none; } }

  /* One preference as radios: the theme's icons side by side, the hand's words, the checked one filled. */
  .choice-group { margin: 0; }
  /* The script hides the fallback button; .button would otherwise keep it displayed. */
  .choice-group [hidden] { display: none; }
  .choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
  .choice-list { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--muted); }
  .choice {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 32px;
    padding: 0 10px; border-radius: var(--radius-sm); color: var(--muted-foreground); font-size: var(--text-meta);
    font-weight: 500; cursor: pointer;
  }
  .choice:is(:hover, :active) { color: var(--foreground); }
  /* The checked one is a raised pill (border, shadow, weight), so it reads without its colour. */
  .choice:has(.choice-input:checked) {
    background: var(--card); color: var(--foreground); font-weight: 600;
    box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
  }
  .choice:has(.choice-input:focus-visible) { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--jx-accent); }
  /* High contrast drops shadows: the system highlight marks the checked one. */
  @media (forced-colors: active) {
    .choice:has(.choice-input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }
  /* The radio stays the control (keyboard, screen readers): it covers its label, drawn by it. */
  .choice-input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  @media (pointer: coarse) { .choice { min-height: var(--tap); min-width: var(--tap); } }
}