/* Shared compact interface language for Academy-managed learning helpers.
 * The controls remain native HTML and the existing helper-specific styles keep
 * their behavior; this layer only normalizes the shared visual system.
 */
.ath-module-helper {
    --ath-helper-ink: #17212b;
    --ath-helper-muted: #4e5d69;
    --ath-helper-line: #9aaab4;
    --ath-helper-line-light: #d7e0e5;
    --ath-helper-surface: #f3f6f7;
    --ath-helper-soft: #e5edf1;
    --ath-helper-titlebar: #d4e1e7;
    --ath-helper-accent: #1f6f8b;
    --ath-helper-accent-strong: #145269;
    --ath-helper-gold: #b1861b;
    --ath-helper-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ath-helper-code-size: 1.08rem;
    --ath-helper-code-leading: 1.55;
    --ath-helper-code-line-height: calc(var(--ath-helper-code-size) * var(--ath-helper-code-leading));
    --ath-helper-code-frame: #10202d;
    --ath-helper-code-gutter-nudge: -.14rem;
    background: var(--ath-helper-surface) !important;
    border: 2px outset #dbe4e8 !important;
    border-radius: 3px !important;
    box-shadow: 2px 2px 0 #7f8c94 !important;
    color: var(--ath-helper-ink) !important;
    font-family: "Segoe UI", system-ui, sans-serif !important;
    margin: .75rem 0 !important;
    overflow: hidden !important;
}

.ath-module-helper__context {
    align-items: center !important;
    background: linear-gradient(#e7f0f4, var(--ath-helper-titlebar)) !important;
    border-bottom: 2px groove #eef4f6 !important;
    display: flex !important;
    min-height: 3.25rem !important;
    padding: .45rem .65rem !important;
}

.ath-module-helper__contextTitle {
    align-items: center !important;
    display: flex !important;
    gap: .48rem !important;
    min-width: 0 !important;
}

.ath-module-helper__icon {
    flex: 0 0 1.65rem !important;
    height: 1.65rem !important;
    object-fit: contain !important;
    width: 1.65rem !important;
}

.ath-module-helper__context h3 {
    color: var(--ath-helper-ink) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}

.ath-module-helper__context p {
    color: var(--ath-helper-muted) !important;
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
    margin: .12rem 0 0 !important;
    max-width: none !important;
}

.ath-module-helper__body {
    padding: .55rem .65rem !important;
}

.ath-module-helper__button {
    background: linear-gradient(#f7fbfc, #dbe7eb) !important;
    border: 2px outset #dbe4e8 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--ath-helper-ink) !important;
    font-size: 1.3rem !important;
    line-height: 1.15 !important;
    min-height: 2rem !important;
    padding: .35rem .6rem !important;
}

.ath-module-helper__button:hover {
    background: #eaf4f7 !important;
    filter: none !important;
}

.ath-module-helper__button:active {
    border-style: inset !important;
    transform: translate(1px, 1px) !important;
}

.ath-module-helper input,
.ath-module-helper select,
.ath-module-helper textarea {
    background: #fff !important;
    border: 2px inset #c1cdd2 !important;
    border-radius: 2px !important;
    color: var(--ath-helper-ink) !important;
    font-family: inherit !important;
    font-size: .8rem !important;
    line-height: 1.25 !important;
    padding: .35rem .45rem !important;
}

.ath-module-helper__task,
.ath-module-helper__notice,
.ath-module-helper__typingFeedback,
.ath-module-helper__typingResult,
.ath-module-helper__voiceFeedback {
    background: #edf4f7 !important;
    border: 1px solid var(--ath-helper-line) !important;
    border-left: 3px solid var(--ath-helper-accent) !important;
    border-radius: 2px !important;
    color: var(--ath-helper-ink) !important;
    margin: 0 0 .55rem !important;
    padding: .45rem .55rem !important;
}

.ath-module-helper__task strong,
.ath-module-helper__notice strong {
    color: var(--ath-helper-accent-strong) !important;
    font-size: .7rem !important;
}

.ath-module-helper__toolbar,
.ath-module-helper__controls,
.ath-module-helper__codeMeta,
.ath-module-helper__codeActions,
.ath-module-helper__voiceControls {
    gap: .35rem !important;
    margin: .45rem 0 !important;
}

.ath-module-helper__toolbar label,
.ath-module-helper__language,
.ath-module-helper__typingInputLabel,
.ath-module-helper__typingField label,
.ath-module-helper__voiceKeyboardLabel {
    color: var(--ath-helper-accent-strong) !important;
    font-size: .65rem !important;
    letter-spacing: .04em !important;
}

.ath-module-helper__codeEditor,
.ath-module-helper__codeOutput,
.ath-module-helper__spreadsheet,
.ath-module-helper__wordEditor,
.ath-module-helper__typingInputWrap,
.ath-module-helper__typingForm,
.ath-module-helper__voiceCanvas,
.ath-module-helper__voiceKeyboard,
.ath-module-helper__voiceMetrics > div {
    border: 1px solid var(--ath-helper-line) !important;
    border-radius: 2px !important;
    box-shadow: 1px 1px 0 var(--ath-helper-line-light) !important;
}

.ath-module-helper__codeEditor,
.ath-module-helper__typingInputWrap,
.ath-module-helper__typingForm {
    background: #eef3f5 !important;
    padding: .5rem !important;
}

.ath-module-helper__codeEditorBar,
.ath-module-helper__codeOutputHead,
.ath-module-helper__spreadsheetMenuBar,
.ath-module-helper__spreadsheetTopbar,
.ath-module-helper__wordTopbar,
.ath-module-helper__typingTopbar,
.ath-module-helper__voiceTopbar {
    background: var(--ath-helper-soft) !important;
    border-bottom: 1px solid var(--ath-helper-line) !important;
    min-height: 2rem !important;
    padding: .3rem .4rem !important;
}

.ath-module-helper__editor {
    box-sizing: border-box !important;
    border: 2px inset #7f929e !important;
    border-radius: 2px !important;
    font-family: var(--ath-helper-code-font) !important;
    font-size: var(--ath-helper-code-size) !important;
    font-weight: 500 !important;
    font-feature-settings: "liga" 0, "clig" 0, "calt" 0 !important;
    font-kerning: none !important;
    font-synthesis: none !important;
    font-variant-ligatures: none !important;
    letter-spacing: normal !important;
    line-height: var(--ath-helper-code-leading) !important;
    word-spacing: normal !important;
}

.ath-module-helper__codeEditorShell {
    align-items: stretch !important;
    grid-template-columns: 2.8rem minmax(0, 1fr) !important;
    line-height: var(--ath-helper-code-line-height) !important;
}

.ath-module-helper__codeLineNumbers,
.ath-module-helper__codeEditorShell .ath-module-helper__editor {
    box-sizing: border-box !important;
    border-width: 2px !important;
    border-style: solid !important;
    font-family: var(--ath-helper-code-font) !important;
    font-size: var(--ath-helper-code-size) !important;
    font-weight: 500 !important;
    font-feature-settings: "liga" 0, "clig" 0, "calt" 0 !important;
    font-kerning: none !important;
    font-synthesis: none !important;
    font-variant-ligatures: none !important;
    letter-spacing: normal !important;
    line-height: var(--ath-helper-code-line-height) !important;
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
    text-indent: 0 !important;
    word-spacing: normal !important;
}

.ath-module-helper .ath-module-helper__codeEditorShell > .ath-module-helper__editor {
    font-family: var(--ath-helper-code-font) !important;
    font-size: var(--ath-helper-code-size) !important;
    font-weight: 500 !important;
    font-feature-settings: "liga" 0, "clig" 0, "calt" 0 !important;
    font-kerning: none !important;
    font-synthesis: none !important;
    font-variant-ligatures: none !important;
    letter-spacing: normal !important;
    line-height: var(--ath-helper-code-line-height) !important;
    text-indent: 0 !important;
    word-spacing: normal !important;
}

.ath-module-helper__codeLineNumbers {
	align-self: stretch !important;
	border-color: var(--ath-helper-code-frame) !important;
	display: block !important;
	height: 100% !important;
	margin: 0 !important;
	overflow: hidden !important;
	padding-right: .45rem !important;
	padding-left: .45rem !important;
	vertical-align: top !important;
    white-space: pre !important;
}

.ath-module-helper__codeLineNumbers span {
    display: block !important;
    height: var(--ath-helper-code-line-height) !important;
    line-height: var(--ath-helper-code-line-height) !important;
    min-height: 0 !important;
    position: relative !important;
    top: var(--ath-helper-code-gutter-nudge) !important;
}

.ath-module-helper__codeEditorShell .ath-module-helper__editor {
	display: block !important;
	border: 2px inset #7f929e !important;
	margin: 0 !important;
	min-height: 12rem !important;
	overflow: auto !important;
	padding-right: .75rem !important;
	padding-left: .75rem !important;
	vertical-align: top !important;
    white-space: pre !important;
    overflow-wrap: normal !important;
}

.ath-module-helper__codeChecks {
    gap: .25rem !important;
    margin: .55rem 0 0 !important;
}

.ath-module-helper__codeChecks li {
    align-items: flex-start !important;
    font-size: .88rem !important;
    gap: .4rem !important;
    line-height: 1.35 !important;
    padding: .42rem .5rem !important;
}

.ath-module-helper__codeChecks li > .ath-module-helper__codeCheckMarker {
    flex: 0 0 1.15rem !important;
    font-size: .78rem !important;
    height: 1.15rem !important;
    line-height: 1.15rem !important;
    width: 1.15rem !important;
}

.ath-module-helper__codeCheckCopy {
    display: grid !important;
    gap: .08rem !important;
    min-width: 0 !important;
}

.ath-module-helper__codeCheckCopy strong {
    font-size: .88rem !important;
    line-height: 1.25 !important;
}

.ath-module-helper__codeCheckCopy small {
    color: var(--ath-helper-muted) !important;
    font-size: .8rem !important;
    line-height: 1.3 !important;
}

.ath-module-helper__codeTerminal,
.ath-module-helper__codePreviewLog,
.ath-module-helper__codeOutput {
    font-size: 1.08rem !important;
    line-height: 1.55 !important;
}

.ath-module-helper__codeWorkspaceHead .ath-module-helper__codeFilename {
    font-size: 1rem !important;
}

.ath-module-helper__codeRuntime,
.ath-module-helper__codeMeta span {
    font-size: .9rem !important;
}

.ath-module-helper__codeChecks li {
    font-size: .98rem !important;
    line-height: 1.4 !important;
    padding: .5rem .6rem !important;
}

.ath-module-helper__codeChecks li > .ath-module-helper__codeCheckMarker {
    flex-basis: 1.25rem !important;
    font-size: .84rem !important;
    height: 1.25rem !important;
    line-height: 1.25rem !important;
    width: 1.25rem !important;
}

.ath-module-helper__codeCheckCopy strong {
    font-size: .98rem !important;
    line-height: 1.3 !important;
}

.ath-module-helper__codeCheckCopy small {
    font-size: .88rem !important;
    line-height: 1.35 !important;
}

.ath-module-helper__typingStudio,
.ath-module-helper__voiceStudio,
.ath-module-helper__wordStudio,
.ath-module-helper__spreadsheetStudio {
    font-size: .82rem !important;
}

.ath-module-helper__typingTarget,
.ath-module-helper__typingInput {
    border-radius: 2px !important;
}

.ath-module-helper__typingKeyboard {
    background: var(--ath-helper-soft) !important;
    border-top: 1px solid var(--ath-helper-line) !important;
    padding: .45rem !important;
}

.ath-module-helper__typingKey {
    background: #eef4f6 !important;
    border: 2px outset #dbe4e8 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: var(--ath-helper-ink) !important;
    min-height: 4.9rem !important;
    min-width: 5.9rem !important;
    padding: .2rem !important;
}

.ath-module-helper__typingKey.is-current {
    background: #f3d77e !important;
    border-color: #b1861b !important;
    box-shadow: none !important;
}

.ath-module-helper__spreadsheetMenuBar,
.ath-module-helper__spreadsheetTopbar,
.ath-module-helper__spreadsheetToolbar {
    gap: .25rem !important;
}

.ath-module-helper__spreadsheetCell,
.ath-module-helper__spreadsheetGrid input,
.ath-module-helper__spreadsheetGrid textarea {
    border-radius: 0 !important;
    font-size: .76rem !important;
}

.ath-module-helper__wordEditor,
.ath-module-helper__wordCanvas {
    background: #fff !important;
    border-radius: 2px !important;
}

.ath-module-helper__voiceMetrics > div {
    background: #edf4f7 !important;
    padding: .35rem .4rem !important;
}

@media (max-width: 720px) {
    .ath-module-helper {
        margin: .55rem 0 !important;
    }

    .ath-module-helper__context {
        min-height: 2.8rem !important;
        padding: .4rem .5rem !important;
    }

    .ath-module-helper__icon {
        flex-basis: 1.45rem !important;
        height: 1.45rem !important;
        width: 1.45rem !important;
    }

    .ath-module-helper__context h3 {
        font-size: .9rem !important;
    }

    .ath-module-helper__context p {
        font-size: .7rem !important;
    }

    .ath-module-helper__body {
        padding: .45rem .5rem !important;
    }

    .ath-module-helper__button {
        min-height: 1.85rem !important;
        padding: .3rem .5rem !important;
    }

    .ath-module-helper__codeTerminal,
    .ath-module-helper__codePreviewLog,
    .ath-module-helper__codeOutput {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .ath-module-helper__codeWorkspaceHead .ath-module-helper__codeFilename {
        font-size: .95rem !important;
    }

    .ath-module-helper__codeRuntime,
    .ath-module-helper__codeMeta span {
        font-size: .82rem !important;
    }

    .ath-module-helper__codeChecks li {
        font-size: .95rem !important;
    }

    .ath-module-helper__codeCheckCopy strong {
        font-size: .95rem !important;
    }

    .ath-module-helper__codeCheckCopy small {
        font-size: .84rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ath-module-helper * {
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}