@layer components {
  /* Workspace settings on a phone: read them, act only to stop a member or an agent. .settings-edit marks what waits
     for a larger screen, .settings-read (a span or a div) what shows in its place. */
  .settings-read, .settings-phone-notice { display: none; }

  @media (max-width: 767px) {
    .app-main .settings-edit { display: none; }
    span.settings-read { display: inline; }
    div.settings-read { display: block; }
    .settings-phone-notice {
      display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; font-size: var(--text-meta);
      color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-md);
    }
    .settings-phone-notice p { margin: 0; }
    .settings-phone-notice svg { flex: none; margin-top: 2px; }
    .settings-read .dl dd { overflow-wrap: anywhere; }
    .settings-read .cell-mono { font-family: var(--font-mono); }
    /* A stacked row whose actions all wait for a larger screen keeps no empty actions cell. */
    .table--stack .cell-actions:not(:has(:is(a, form):not(.settings-edit))) { display: none; }
  }
}