/* ============================================================
   STS Responsive — sts-responsive.css
   Shared mobile styles for all Smart Tools Suite tools
   calcdaystime.com
   Breakpoint: 600px and below
   ============================================================ */

@media (max-width: 600px) {

    /* ── All tool wrappers ─────────────────────────────────── */
    #sts-rc-wrap,
    #sts-fc-wrap,
    #sts-sq-wrap,
    #sts-exp-wrap,
    #sts-pg-wrap,
    #sts-rn-wrap,
    #sts-gpa-wrap,
    #sts-avg-wrap,
    #sts-pct-wrap,
    #sts-uc-wrap,
    #sts-tip-wrap,
    #sts-tc-wrap,
    #sts-wc-wrap,
    #sts-rng-wrap,
    #sts-age-wrap,
    #sts-days-wrap,
    #sts-dd-wrap,
    #sts-td-wrap,
    #sts-bt-wrap {
        border-radius: 10px !important;
        margin: 0 !important;
    }

    /* ── All inner panels — reduce padding ─────────────────── */
    #sts-rc-wrap > div,
    #sts-fc-wrap > div,
    #sts-sq-wrap > div,
    #sts-exp-wrap > div,
    #sts-pg-wrap > div,
    #sts-rn-wrap > div,
    #sts-gpa-wrap > div,
    #sts-avg-wrap > div,
    #sts-pct-wrap > div,
    #sts-uc-wrap > div,
    #sts-tip-wrap > div,
    #sts-tc-wrap > div,
    #sts-wc-wrap > div,
    #sts-rng-wrap > div,
    #sts-age-wrap > div,
    #sts-days-wrap > div,
    #sts-dd-wrap > div,
    #sts-td-wrap > div,
    #sts-bt-wrap > div {
        padding: 16px !important;
    }

    /* ── 3-column grids → 1 column ─────────────────────────── */
    div[style*="grid-template-columns:repeat(3,1fr)"],
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ── 2-column grids → 1 column ─────────────────────────── */
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ── 3-column grids (repeat style) → 1 col ─────────────── */
    div[style*="grid-template-columns:repeat(2,1fr)"],
    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ── Flex rows that should stack on mobile ──────────────── */
    div[style*="display:flex"][style*="gap:16px"],
    div[style*="display:flex"][style*="gap:14px"],
    div[style*="display:flex"][style*="gap:20px"] {
        flex-wrap: wrap !important;
    }

    /* ── Result cards — reduce font sizes ───────────────────── */
    div[style*="font-size:36px"],
    div[style*="font-size:42px"],
    div[style*="font-size:32px"] {
        font-size: 24px !important;
    }

    div[style*="font-size:28px"] {
        font-size: 20px !important;
    }

    /* ── Inputs — full width on mobile ──────────────────────── */
    #sts-rc-wrap input[type="number"],
    #sts-fc-wrap input[type="number"],
    #sts-sq-wrap input[type="number"],
    #sts-exp-wrap input[type="number"],
    #sts-rn-wrap input[type="number"],
    #sts-rn-wrap input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* prevents iOS zoom */
    }

    /* ── Buttons — full width ───────────────────────────────── */
    #sts-rc-wrap button[onclick*="stsRc"],
    #sts-fc-wrap button[onclick*="stsFc"],
    #sts-sq-wrap button[onclick*="stsSq"],
    #sts-exp-wrap button[onclick*="stsExp"],
    #sts-rn-wrap button[onclick*="stsRn"] {
        font-size: 14px !important;
    }

    /* ── Ratio calculator specific ──────────────────────────── */
    /* Fraction input pairs — keep stacked nicely */
    #sts-fc-wrap .frac-pair {
        align-items: center !important;
    }

    /* ── Tabs — smaller text on mobile ──────────────────────── */
    #sts-rc-wrap > div:first-child button,
    #sts-fc-wrap > div:first-child button,
    #sts-sq-wrap > div:first-child button,
    #sts-exp-wrap > div:first-child button,
    #sts-pg-wrap > div:first-child button,
    #sts-rn-wrap > div:first-child button {
        padding: 10px 6px !important;
        font-size: 11px !important;
    }

    /* ── Solution boxes — smaller font ──────────────────────── */
    div[style*="font-family:monospace"] {
        font-size: 11px !important;
        line-height: 1.6 !important;
        padding: 10px 12px !important;
    }

    /* ── Quick chip buttons ──────────────────────────────────── */
    div[style*="display:flex;flex-wrap:wrap;gap:8px"] button {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* ── Password generator ──────────────────────────────────── */
    #sts-pg-wrap input[type="range"] {
        width: 100% !important;
    }

    #sts-pg-wrap label {
        font-size: 12px !important;
    }

    /* ── Roman numeral date grid → 1 col ────────────────────── */
    #sts-rn-wrap div[style*="grid-template-columns:1fr 1fr 1fr"],
    #sts-rn-wrap div[style*="grid-template-columns: 1fr 1fr 1fr"],
    #sts-rn-wrap div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Exponent calculator input row ──────────────────────── */
    #sts-exp-wrap div[style*="display:flex"][style*="align-items:center"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* ── Square root quick ref chips ────────────────────────── */
    #sts-sq-wrap div[style*="flex-wrap:wrap"] button {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    /* ── Fraction calculator operation inputs ────────────────── */
    #sts-fc-wrap input[type="number"] {
        width: 70px !important;
        font-size: 16px !important;
    }

    /* ── Proportion/Direct/Inverse inputs ────────────────────── */
    #sts-rc-wrap input[type="number"] {
        width: 70px !important;
        font-size: 16px !important;
        padding: 8px 4px !important;
    }

    /* ── Tables — horizontal scroll ─────────────────────────── */
    div[style*="overflow-x:auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ── Prevent content overflow ───────────────────────────── */
    #sts-rc-wrap,
    #sts-fc-wrap,
    #sts-sq-wrap,
    #sts-exp-wrap,
    #sts-pg-wrap,
    #sts-rn-wrap {
        overflow-x: hidden !important;
    }
}

/* ── 400px and below — extra small phones ───────────────────── */
@media (max-width: 400px) {

    #sts-rc-wrap > div:first-child button,
    #sts-fc-wrap > div:first-child button,
    #sts-sq-wrap > div:first-child button,
    #sts-exp-wrap > div:first-child button,
    #sts-pg-wrap > div:first-child button,
    #sts-rn-wrap > div:first-child button {
        padding: 8px 4px !important;
        font-size: 10px !important;
    }

    div[style*="font-size:24px"],
    div[style*="font-size:22px"] {
        font-size: 18px !important;
    }

    div[style*="font-size:20px"] {
        font-size: 16px !important;
    }
}