/* Bottom sheets like iOS 26 (DESIGN.md, section 10): floating on phones, a centred card on wide screens.
   Behaviour: sheet.js. Materials: liquid-glass.css. Used by the Studby Coin rules and the notification settings. */
.sheet-dialog {width: min(420px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px)); overflow: auto; overscroll-behavior: contain; margin: auto; padding: 8px 20px 20px; border-radius: 32px; color: var(--ios-text); touch-action: none}
.sheet-dialog.is-scrollable {touch-action: pan-y}
.sheet-dialog.is-scrollable :is(.sheet-grabber, .sheet-hero) {touch-action: none}
.sheet-dialog[open] {animation: sheet-in .34s cubic-bezier(.2, .9, .25, 1)}
.sheet-dialog.is-closing {transform: translateY(calc(100% + 24px)); transition: transform .22s ease-in}
.sheet-dialog:not(.is-dragging):not(.is-closing) {transition: transform .25s cubic-bezier(.2, .9, .25, 1)}
@keyframes sheet-in {from {transform: translateY(calc(100% + 24px))}}
@media (max-width: 767px) {
  .sheet-dialog {inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px; width: auto; max-width: none; margin: 0}
}
@media (min-width: 768px) {
  .sheet-dialog[open] {animation-name: sheet-card-in}
  @keyframes sheet-card-in {from {opacity: 0; transform: scale(.96)}}
  .sheet-dialog.is-closing {transform: scale(.96); opacity: 0; transition: transform .18s ease-in, opacity .18s ease-in}
  .sheet-grabber {visibility: hidden}
}
.sheet-grabber {width: 36px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--ios-secondary); opacity: .45}
.sheet-close {position: absolute; top: 14px; right: 14px}
.sheet-hero {display: grid; justify-items: center; gap: 4px; padding: 14px 0 18px; text-align: center}
.sheet-hero img {width: 112px; height: 112px; margin-bottom: 8px}
.sheet-hero h2 {margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.6px}
.sheet-hero p {margin: 0; color: var(--ios-secondary); font-size: 15px; font-variant-numeric: tabular-nums}
.sheet-list {display: grid; margin: 0 0 16px; padding: 0; list-style: none; border-radius: 18px; overflow: hidden}
.sheet-list li {position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px}
.sheet-list li + li::before {content: ""; position: absolute; top: 0; left: 60px; right: 0; border-top: .5px solid var(--lg-border)}
.sheet-list div {display: grid; gap: 2px; min-width: 0}
.sheet-list strong {font-size: 16px; font-weight: 600; line-height: 1.3}
.sheet-list div span {color: var(--ios-secondary); font-size: 14px; line-height: 1.35}
.sheet-tile {flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff}
.sheet-tile svg {width: 18px; height: 18px}
.sheet-tile--green {background: #34c759}
.sheet-tile--pink {background: #ff2d55}
.sheet-tile--blue {background: #007aff}
.sheet-tile--orange {background: #ff9500}
.sheet-tile--grey {background: #8e8e93}
.sheet-dialog .sheet-done {width: 100%}
@media (prefers-reduced-motion: reduce) {.sheet-dialog[open] {animation: none}}
.sheet-tile--red {background: #ff3b30}