/* components.css — bottom sheet, toast, switch, buttons — extracted from the gen-2 PWA shell (share/release). */

/* ---- bottom sheet ---- */
.sheet {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
}
/* the [hidden] attribute must win over display:flex */
.sheet[hidden] { display: none; }
.sheet-panel {
  width: 100%; max-width: 540px;
  max-height: 92dvh;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column;
  animation: sheetup .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--hairline);
}
.sheet-title { font-size: 17px; font-weight: 700; }
.sheet-x { background: var(--panel-2); border: 1px solid var(--hairline); color: var(--fg); width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.sheet-body { padding: 18px 20px calc(env(safe-area-inset-bottom) + 24px); overflow-y: auto; }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 24px); transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--hairline); color: var(--fg);
  padding: 10px 16px; border-radius: 999px; font-size: 13px; z-index: 40;
  opacity: 0; transition: opacity .2s; pointer-events: none;
  max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; }

/* ---- switch (toggle) ---- */
.switch { width: 48px; height: 28px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--hairline); position: relative; cursor: pointer; transition: background .15s; flex: none; }
.switch span { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--faint); transition: transform .15s, background .15s; }
.switch[aria-checked="true"] { background: var(--orange-22); border-color: var(--orange-35); }
.switch[aria-checked="true"] span { transform: translateX(20px); background: var(--orange); }

/* ---- button system ---- */
.btn { font-family: var(--sans); font-size: 14px; font-weight: 600; border: none; border-radius: 11px; padding: 11px 16px; cursor: pointer; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--orange); color: #1a0f06; }
.btn-primary:active:not(:disabled) { background: var(--forge); }
.btn-ghost { background: var(--panel-2); color: var(--fg); border: 1px solid var(--hairline); }
.btn-block { display: block; width: 100%; margin-top: 12px; }
.btn-danger { background: var(--danger); color: #1a0606; }