/* ============================================================
   css/phone.css — the last stylesheet on every page (after theme.css).

   Phone polish that applies across pages, checked at the usual phone widths
   (320, 360, 375, 390, 412, 430) and the narrowest foldable cover screen (280):
   comfortable touch targets, a styled file picker, a topbar that fits 280px,
   readable minimum text sizes. Page-specific layouts stay in css/pages/*.css.
   ============================================================ */

/* ---- file picker: one look everywhere instead of the browser's grey button ---- */
input[type="file"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 8px;
    font: inherit;
    font-size: 13px;
    color: var(--ink-soft);
    background: var(--color-surface);
    border: 1.5px dashed var(--neutral-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    margin-inline-end: 12px;
    padding: 8px 16px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--grad-btn-start), var(--grad-btn-end));
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
input[type="file"]:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }

/* ---- touch targets: at least 36px high wherever a finger is the pointer ---- */
@media (pointer: coarse) {
    .btn-ghost,
    .admin-live-notes-chip,
    .admin-name-btn,
    .msg-reply-btn,
    .student-overview-chart-link,
    .testimonial-all-link,
    .cr-back {
        min-height: 36px;
    }
    .btn-ghost { min-width: 36px; }
    .contacts-phone { display: inline-flex; align-items: center; min-height: 36px; }
    .btn-ghost,
    .admin-live-notes-chip,
    .msg-reply-btn { display: inline-flex; align-items: center; justify-content: center; }
    .form-input-icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }

    /* text links that sit in a line (breadcrumbs, footer credits, a lesson's "next"): a taller hit area, same look */
    .lc-breadcrumb a,
    .footer-credits-link,
    .lc-post-cat,
    .cr-back { display: inline-flex; align-items: center; min-height: 36px; }
    .lc-breadcrumb { row-gap: 0; }
    details > summary { min-height: 36px; display: flex; align-items: center; }
}

/* ---- text never smaller than 11px ---- */
.notif-bell-count,
.msg-bubble-meta,
.admin-staff-role,
.cc-table small { font-size: 11px; }
@media (max-width: 560px) {
    .logo-sub { font-size: 10px; }
}

/* ---- the narrowest screens (foldable cover display, 280-340px) ---- */
@media (max-width: 340px) {
    .student-topbar,
    .admin-topbar { padding-inline: 10px; gap: 6px; }
    .student-topbar-actions,
    .admin-topbar-actions { gap: 4px; }
    .student-menu-btn,
    .admin-menu-btn,
    .student-topbar .theme-toggle,
    .admin-topbar .theme-toggle,
    .student-topbar .notif-bell-btn,
    .admin-topbar .notif-bell-btn,
    .student-topbar .topbar-action-pill,
    .admin-topbar .topbar-action-pill { width: 34px; height: 34px; }
    .student-topbar .topbar-action-pill-label { display: none; }
    .student-topbar .topbar-action-pill { padding: 0; justify-content: center; }
    .admin-topbar-title { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .student-content,
    .admin-main { padding-inline: 12px; }
}