/* ============================================================
   Roman Blind Fabric Calculator - inch-mode overrides
   Load this AFTER L-calculator.css on this calculator's page only.
   Does not modify the shared stylesheet, so no effect on any
   other calculator.

   L-calculator.css locks every readonly input inside #stylizedgrey
   to 50px width (!important). That's fine for short values, but
   Fabric/Lining/Interlining Cut Drop can run to 3 digits plus a
   fraction in inch mode (e.g. "106 1/2"") and get clipped at 50px.
   ACD already has its own override for this same reason, but only
   in the mobile media query - these blocks add the same fix for
   FCD/LCDD/BOCUTDROP, on both desktop and mobile.

   Every selector here includes [readonly] as well as [name=...] -
   two attribute selectors instead of one, which makes these
   strictly MORE specific than the shared file's own
   input[readonly] (50px) and input[name^="RP"] (75px) rules.
   That means this override wins regardless of which stylesheet
   loads first, rather than depending on load order alone.

   Widths tuned via live DevTools checks:
   - FCD needs more room than LCDD/BOCUTDROP in practice
   - RPA doesn't need the shared file's own RP-prefix 75px rule at
     all - narrowed back down to the panel's normal 50px here,
     targeted by exact name so it doesn't touch RPTQ (which also
     matches the shared file's "RP" prefix rule and is left alone)
   ============================================================ */

.imperial-mode #stylizedgrey input[readonly][name="FCD"] {
    width: 65px !important;
}

.imperial-mode #stylizedgrey input[readonly][name="LCDD"],
.imperial-mode #stylizedgrey input[readonly][name="BOCUTDROP"] {
    width: 65px !important;
}

.imperial-mode #stylizedgrey input[readonly][name="RPA"] {
    width: 50px !important;
}

@media only screen and (max-device-width: 480px) {
    .imperial-mode #stylizedgrey input[readonly][name="FCD"] {
        width: 65px !important;
    }

    .imperial-mode #stylizedgrey input[readonly][name="LCDD"],
    .imperial-mode #stylizedgrey input[readonly][name="BOCUTDROP"] {
        width: 65px !important;
    }

    .imperial-mode #stylizedgrey input[readonly][name="RPA"] {
        width: 50px !important;
    }
}