/* Base conversion shares the Parsons exercise palette and control hierarchy. */
.q-base-to-base.docutils.container {
    --qb-border: var(--color-background-border, #d0d7de);
    --qb-card: var(--color-background-secondary, #f6f8fa);
    --qb-panel: var(--color-background-primary, #fff);
    --qb-text: var(--color-foreground-primary, #1f2328);
    --qb-muted: #424a53;
    --qb-tray: #eaeef2;
    --qb-control-border: #6e7781;
    --qb-success-bg: #dafbe1;
    --qb-success: #0d5121;
    --qb-error-bg: #ffebe9;
    --qb-error: #8e1525;
    --qb-info-bg: #fff8c5;
    --qb-info: #633c01;
    border: 1px solid var(--qb-border);
    border-radius: 8px;
    background: var(--qb-card);
    color: var(--qb-text);
    padding: 1.25rem;
    margin-block: 1.75rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
    overflow-wrap: anywhere;
    position: relative;
}

body[data-theme="dark"] .q-base-to-base.docutils.container {
    --qb-muted: #c9d1d9;
    --qb-tray: #21262d;
    --qb-control-border: #8b949e;
    --qb-success-bg: #152c20;
    --qb-success: #9af0a2;
    --qb-error-bg: #351d23;
    --qb-error: #ffb4ae;
    --qb-info-bg: #302818;
    --qb-info: #f0d58c;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) .q-base-to-base.docutils.container {
        --qb-muted: #c9d1d9;
        --qb-tray: #21262d;
        --qb-control-border: #8b949e;
        --qb-success-bg: #152c20;
        --qb-success: #9af0a2;
        --qb-error-bg: #351d23;
        --qb-error: #ffb4ae;
        --qb-info-bg: #302818;
        --qb-info: #f0d58c;
    }
}

.q-base-to-base [hidden] { display: none !important; }

.q-base-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.q-base-conversion {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 3vw, 2rem);
    margin-bottom: 1.25rem;
}

.q-base-source, .q-base-target {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.q-base-eyebrow {
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--qb-muted);
}

.q-base-numeral {
    font-family: var(--font-stack--monospace, monospace);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.q-base-base-name { color: var(--qb-muted); font-size: 0.875rem; }
.q-base-arrow { font-size: 1.75rem; color: var(--qb-muted); flex-shrink: 0; }

.q-base-controls {
    min-width: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--qb-border);
    border-radius: 6px;
    background: var(--qb-panel);
}

.q-base-controls legend {
    float: left;
    box-sizing: border-box;
    width: calc(100% + 2rem);
    max-width: none;
    margin: -1rem -1rem 1rem;
    padding: 0.65rem 1rem;
    background: var(--qb-tray);
    border-bottom: 1px solid var(--qb-border);
    border-radius: 5px 5px 0 0;
    color: var(--qb-muted);
    font-size: 0.825rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.q-base-controls legend + * { clear: both; }
.q-base-to-base .q-base-hint { color: var(--qb-muted); font-size: 0.875rem; margin: 0 0 1rem; }
.q-base-controls input, .q-base-controls select, .q-base-controls button {
    box-sizing: border-box;
    min-height: 2.75rem;
    max-width: 100%;
    border-radius: 6px;
    font: inherit;
}

.q-base-controls input, .q-base-controls select {
    border: 1px solid var(--qb-control-border);
    color: var(--qb-text);
    background: var(--qb-panel);
    font-family: var(--font-stack--monospace, monospace);
    font-size: 1.25rem;
    padding: 0.5rem 0.65rem;
    font-variant-numeric: tabular-nums;
}

.q-base-controls input { width: 22ch; margin-top: 0.25rem; }
.q-base-controls select { width: 4.25rem; cursor: pointer; }
.q-base-controls button {
    padding: 0.4rem 0.95rem;
    font-size: 0.875rem;
    font-weight: 650;
    cursor: pointer;
    border: 1px solid var(--qb-control-border);
    color: var(--qb-text);
    background: var(--qb-card);
}

.q-base-controls button:hover { background: var(--qb-tray); }
.q-base-controls [data-base-check] { background: #116329; color: #fff; border-color: #116329; }
.q-base-controls [data-base-check]:hover { background: #0d5121; border-color: #0d5121; }
.q-base-controls button:disabled { opacity: 0.55; cursor: default; }

.q-base-controls :focus-visible {
    outline: 3px solid var(--color-brand-primary, #0969da);
    outline-offset: 3px;
}

.q-base-digits {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.3rem;
    margin: 0 -0.3rem;
}
.q-base-digit { position: relative; display: inline-block; flex: 0 0 auto; }
.q-base-length, .q-base-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.q-base-table-scroll { max-width: 100%; overflow-x: auto; margin: 0 -0.25rem; padding: 0.25rem; }
.q-base-to-base .q-base-table-scroll .table-wrapper.container { overflow: visible; box-sizing: border-box; margin: 0; padding: 0; }
.q-base-to-base table.q-base-table { margin: 0; border-collapse: collapse; box-shadow: none; width: auto; }
.q-base-to-base .q-base-table th, .q-base-to-base .q-base-table td {
    padding: 0.6rem 0.75rem;
    text-align: center;
    border: 1px solid var(--qb-border);
    font-variant-numeric: tabular-nums;
}
.q-base-to-base .q-base-table th { background: var(--qb-card); font-size: 0.875rem; font-weight: 600; }
.q-base-to-base .q-base-table th:first-child { text-align: left; min-width: 7rem; }
.q-base-to-base .q-base-table p { margin: 0; }
.q-base-table td { font-family: var(--font-stack--monospace, monospace); }
.q-base-to-base .q-base-response-row td { padding-block: 0.5rem; }

.q-base-result, .q-base-note {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 0.875rem;
}
.q-base-result { color: var(--qb-error); background: var(--qb-error-bg); }
.q-base-result[data-state="correct"] { color: var(--qb-success); background: var(--qb-success-bg); }
.q-base-note { color: var(--qb-info); background: var(--qb-info-bg); }
.q-base-status-icon::before { content: "!"; font-weight: 800; }
.q-base-result[data-state="correct"] .q-base-status-icon::before { content: "✓"; }
.q-base-to-base .q-base-feedback p { margin: 0; }
.q-base-ready > .q-base-worksheet, .q-base-ready > .q-base-nojs { display: none; }

@media (max-width: 480px) {
    .q-base-to-base.docutils.container { padding: 0.75rem; }
    .q-base-controls { padding: 0.75rem; }
    .q-base-controls legend { width: calc(100% + 1.5rem); margin: -0.75rem -0.75rem 0.75rem; }
}

@media print {
    .q-base-to-base.docutils.container { background: transparent; color: #000; border: 1px solid #777; box-shadow: none; padding: 0.75rem; }
    .q-base-controls { border: 0; padding: 0; background: transparent; }
    .q-base-controls legend, .q-base-controls .q-base-entry, .q-base-response-row, .q-base-to-base > .q-base-nojs { display: none !important; }
    .q-base-to-base > .q-base-worksheet { display: block; }
    .q-base-to-base table.q-base-table { table-layout: fixed; width: 100%; font-size: 0.75rem; }
    .q-base-to-base .q-base-table th, .q-base-to-base .q-base-table td { min-width: 0; padding: 0.2rem; background: transparent; color: #000; font-size: inherit; }
    .q-base-table-scroll { overflow: visible; }
    .q-base-eyebrow, .q-base-base-name, .q-base-arrow, .q-base-to-base .q-base-hint { color: #000; }
}

.q-base-numeral sub { font-size: 0.5em; }
.q-base-expansion { display: block; margin-top: 0.5rem; font-size: 1rem; overflow-wrap: anywhere; }
.q-base-feedback p { min-width: 0; }
.q-base-hex { margin-block: 1rem !important; }

.q-base-result { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.q-base-expansion { grid-column: 2; margin-top: 0; }