fredericks-serial-terminal[data-fredericks-serial-terminal-host] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(0, 0, 0, 0.87);
    background: transparent;
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

fredericks-serial-terminal[data-fredericks-serial-terminal-host],
fredericks-serial-terminal[data-fredericks-serial-terminal-host] *,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] *::before,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] *::after {
    box-sizing: border-box;
}

fredericks-serial-terminal [data-fredericks-serial-terminal-root],
fredericks-serial-terminal .fredericks-web-serial-terminal-app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-family: Roboto, Arial, sans-serif;
}

fredericks-serial-terminal .fredericks-web-serial-terminal-app button,
fredericks-serial-terminal .fredericks-web-serial-terminal-app input,
fredericks-serial-terminal .fredericks-web-serial-terminal-app textarea,
fredericks-serial-terminal .fredericks-web-serial-terminal-app select {
    font-family: inherit;
}

.fredericks-serial-terminal-load-error {
    margin: 16px 0;
    padding: 12px 16px;
    border: 1px solid #d32f2f;
    border-radius: 4px;
    background: #fdeded;
    color: #5f2120;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* WordPress visual normalization: the Fredericks site uses a root font scale
 * that is smaller than the standalone React development environment. Keep the
 * terminal itself on the 16px localhost baseline without changing the site. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* WordPress themes commonly style native form controls. MUI's Product
 * Autocomplete contains a real input while the adjacent Select controls do not,
 * so explicitly keep the connection row aligned to the MUI filled-field height. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app .MuiAutocomplete-root .MuiFilledInput-root,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app .MuiFormControl-root > .MuiFilledInput-root {
    min-height: 56px !important;
}

fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app .MuiAutocomplete-root input.MuiInputBase-input {
    min-height: 0 !important;
    box-sizing: content-box !important;
}

/* Prevent generic theme rules from shrinking MUI controls inside the terminal. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app button,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app input,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app textarea,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app select {
    max-width: none;
    text-transform: none;
}

fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app .MuiButton-root {
    text-transform: uppercase;
}

/* 1.14.16 visual parity + guaranteed delivery ----------------------------------------------------
 * The WordPress page builder constrains shortcode content to its content
 * column, while the standalone React application uses the browser width.
 * Break the terminal out of that column so the connected command library has
 * the same working width as localhost. The disconnected Home screen still
 * applies its own 1152px max-width internally. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host] {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 32px) !important;
    max-width: none !important;
}

/* MUI 5 expresses much of its typography in rem units. Some WordPress/theme
 * combinations alter font sizing outside the application. Pin the MUI type
 * scale to the same pixel values used by the standalone 16px-root build. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiTypography-h4 {
    font-size: 34px !important;
    line-height: 1.235 !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiTypography-h5 {
    font-size: 24px !important;
    line-height: 1.334 !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiTypography-h6 {
    font-size: 20px !important;
    line-height: 1.6 !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiTypography-subtitle1 {
    font-size: 16px !important;
    line-height: 1.75 !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiTypography-subtitle2 {
    font-size: 14px !important;
    line-height: 1.57 !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiTypography-body1 {
    font-size: 16px !important;
    line-height: 1.5 !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiTypography-body2,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiAlert-message {
    font-size: 14px !important;
    line-height: 1.43 !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiTypography-caption {
    font-size: 12px !important;
    line-height: 1.66 !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiInputBase-root,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiFormLabel-root,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiMenuItem-root {
    font-size: 16px !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiButton-root {
    font-size: 14px !important;
    line-height: 1.75 !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiChip-label {
    font-size: 13px !important;
}
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .codeContainer code {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

@media (max-width: 600px) {
    fredericks-serial-terminal[data-fredericks-serial-terminal-host] {
        width: calc(100vw - 16px) !important;
    }
}

/* Connected-layout parity ---------------------------------------------------------------
 * The Fredericks site changes the document root font scale, so a rem-based
 * desktop max-width becomes much narrower in WordPress than it is locally.
 * Leave the disconnected Home screen unchanged, but when the terminal is
 * connected, align the terminal + Command Assistant with the site's desktop
 * header container (logo-left to search-right): 1170px. Web Serial is used in
 * modern Chromium browsers, so :has() is available for this state-specific
 * WordPress integration rule. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host] [data-fredericks-serial-terminal-root]:has(.terminalOutput),
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app:has(.terminalOutput) {
    width: 100% !important;
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 1202px) {
    fredericks-serial-terminal[data-fredericks-serial-terminal-host] [data-fredericks-serial-terminal-root]:has(.terminalOutput),
    fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app:has(.terminalOutput) {
        max-width: calc(100vw - 32px) !important;
    }
}

@media (max-width: 600px) {
    fredericks-serial-terminal[data-fredericks-serial-terminal-host] [data-fredericks-serial-terminal-root]:has(.terminalOutput),
    fredericks-serial-terminal[data-fredericks-serial-terminal-host] .fredericks-web-serial-terminal-app:has(.terminalOutput) {
        max-width: calc(100vw - 16px) !important;
    }
}

/* WordPress/theme input rules can collapse native text/number inputs even
 * though adjacent MUI Select controls retain the correct small-field height.
 * Restore MUI's standard size="small" outlined field geometry. This covers
 * command search, integer controls, set-point mantissas, and calibration input. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiOutlinedInput-root.MuiInputBase-sizeSmall {
    height: 40px !important;
    min-height: 40px !important;
    align-items: center !important;
}

fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiOutlinedInput-root.MuiInputBase-sizeSmall > input.MuiInputBase-input,
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiOutlinedInput-root.MuiInputBase-sizeSmall > input.MuiOutlinedInput-input {
    height: 23px !important;
    min-height: 23px !important;
    padding: 8.5px 14px !important;
    line-height: 23px !important;
    box-sizing: content-box !important;
}

/* Keep browser number spinners inside the normalized 40px control. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host] input.MuiInputBase-input[type="number"] {
    margin: 0 !important;
}

/* 1.14.19 terminal command-input parity ---------------------------------------------------------
 * The Send button is explicitly 56px tall in TerminalInput.js. Some WordPress
 * theme rules reduce the adjacent native MUI input. Pin the outlined input to
 * the same medium TextField geometry so both controls align exactly. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host] .MuiOutlinedInput-root:has(> #fredericks-serial-terminal-input) {
    height: 56px !important;
    min-height: 56px !important;
    align-items: center !important;
}

fredericks-serial-terminal[data-fredericks-serial-terminal-host] #fredericks-serial-terminal-input.MuiOutlinedInput-input {
    height: 23px !important;
    min-height: 23px !important;
    padding: 16.5px 14px !important;
    line-height: 23px !important;
    box-sizing: content-box !important;
}


/* 1.20.2 disconnected-page parity ---------------------------------------------------------
 * The Fredericks site uses a smaller document-root font scale than localhost. The
 * application now uses fixed 16px-baseline dimensions for its own layout; these rules
 * add only WordPress-page spacing and a defensive width guard for the connection screen. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host]:not(:has(.terminalOutput)) {
    margin-top: 16px !important;
}

fredericks-serial-terminal[data-fredericks-serial-terminal-host]:not(:has(.terminalOutput))
.fredericks-web-serial-terminal-app > .MuiBox-root > .MuiGrid-container > .MuiBox-root {
    width: 100% !important;
    max-width: 1152px !important;
}

/* Keep command-code fields on the same 16px-root scale used by localhost even if the
 * WordPress theme applies its own <code> font-size rule. */
fredericks-serial-terminal[data-fredericks-serial-terminal-host]
.fredericks-web-serial-terminal-app:has(.terminalOutput) .MuiPaper-root code {
    font-size: 15.2px !important;
}