/* Sheets, Meet view and toast actions. Values come from tokens.css. */
.sheet { border: 0; padding: 0; color: var(--text-primary); background: var(--raised); width: min(640px, 100%); max-width: none; max-height: 85dvh; margin: auto auto 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-top: 1px solid var(--border-divider); box-shadow: var(--lift); overscroll-behavior: contain; }
.sheet::before { content: ""; flex: none; align-self: center; width: 40px; height: 4px; margin-top: var(--s-2); border-radius: var(--radius-pill); background: var(--border-divider); }
.sheet::backdrop { background: var(--overlay); }
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in var(--dur-base) var(--ease-decelerate) both; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4); border-bottom: 1px solid var(--border-divider-subtle); }
.sheet-head h2 { font-size: var(--type-h3-size); }
.sheet-body { padding: var(--s-4) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-4); }
.sheet-status { color: var(--text-secondary); font-size: var(--type-small-size); }
.sheet-status:empty { display: none; }
.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.svc { border: 1px solid var(--border-divider-subtle); border-radius: var(--radius-xl); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.svc-state { font-weight: 600; }
.svc-scopes { margin: 0; padding-left: var(--s-5); color: var(--text-secondary); font-size: var(--type-small-size); }
.svc-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.key-form { display: flex; flex-direction: column; gap: var(--s-2); }
.key-form input { width: 100%; min-height: 44px; font: inherit; color: var(--text-primary); background: var(--canvas); border: 1px solid var(--border-interactive); border-radius: var(--radius-md); padding: 0 var(--s-3); }
.key-form label { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--type-small-size); color: var(--text-secondary); }
.set-row { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.set-row legend { padding: 0; font-weight: 600; margin-bottom: var(--s-1); }
.radio { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; }
.radio input { width: 20px; height: 20px; accent-color: var(--accent-text); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); }
.toast .btn { min-height: 44px; }
@media (min-width: 1024px) {
  .sheet { width: min(560px, 90vw); margin: auto; border-radius: var(--radius-xl); border: 1px solid var(--border-divider); }
  .sheet::before { display: none; }
  .sheet-head { padding-top: var(--s-2); }
}
@media (max-width: 480px) { #who { display: none; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(var(--s-5)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation-duration: 1ms; } }
.svc-custom, .svc-form-slot { display: flex; flex-direction: column; gap: var(--s-3); }
.svc-form { border: 1px solid var(--border-divider-subtle); border-radius: var(--radius-lg); padding: var(--s-4); }
.svc-form select, .svc-form textarea { width: 100%; min-height: 44px; font: inherit; color: var(--text-primary); background: var(--canvas); border: 1px solid var(--border-interactive); border-radius: var(--radius-md); padding: var(--s-2) var(--s-3); }
.svc-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent-text); }
.svc-form .radio { flex-direction: row; }
.svc-form-slot > label { display: flex; flex-direction: column; gap: var(--s-1); }
.svc-form input, .svc-form textarea { overflow-wrap: anywhere; }