/* Page-specific responsive rules moved from desktop stylesheets. */
@media (max-width: 760px) {
    :where(body[data-page="/utility-tools/time/"]) .app-shell { width: min(100% - 32px, 700px); }
    :where(body[data-page="/utility-tools/time/"]) .topbar { flex-wrap: wrap; justify-content: space-between; padding: 13px 0; }
    :where(body[data-page="/utility-tools/time/"]) .tool-brand-tagline { order: 3; width: 100%; text-align: left; }
    :where(body[data-page="/utility-tools/time/"]) .hero { padding-top: 32px; }
    :where(body[data-page="/utility-tools/time/"]) .tool-card { padding: 17px; }
    :where(body[data-page="/utility-tools/time/"]) .popular-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    :where(body[data-page="/utility-tools/time/"]) .search-grid,
    :where(body[data-page="/utility-tools/time/"]) .clock-primary,
    :where(body[data-page="/utility-tools/time/"]) .clock-detail-grid { grid-template-columns: 1fr; }
    :where(body[data-page="/utility-tools/time/"]) .clock-value-group { min-height: 82px; }
    :where(body[data-page="/utility-tools/time/"]) .footer { flex-direction: column; }
}