/* ===== Safe area support ===== */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== Focus styles ===== */
:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: 2px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .animate-spin,
    .animate-pulse,
    .animate-bounce { animation: none; }

    .transition-all,
    .transition-transform,
    .transition-opacity,
    .transition-colors { transition: none !important; }
}

/* ===== iOS card ===== */
.ios-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ===== QR code ===== */
#qrcode img { max-width: 100%; height: auto; }

/* ===== Comment chevron toggle ===== */
.comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #8e8e93;
    cursor: pointer;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
}

.comment-toggle:hover {
    color: #007aff;
}

.comment-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

.comment-chevron.open {
    transform: rotate(180deg);
}

/* ===== Print-friendly results ===== */
@media print {
    .no-print { display: none !important; }
    body { background: white; padding: 0; }
    .ios-card { box-shadow: none; border: 1px solid #e5e5ea; }
}

/* ===== Standalone PWA adjustments ===== */
@media all and (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
    }
}