.calculator {
    display: grid;
    gap: 16px;
}

.calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.calc-field {
    display: grid;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.calc-field[hidden] {
    display: none;
}

.calc-input {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
}

.calc-input input,
.calc-field select {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-weight: 400;
}

.calc-field select {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
}

.calc-input em {
    padding: 0 12px;
    color: var(--muted-foreground);
    font-style: normal;
    font-weight: 600;
}

.calc-input:focus-within,
.calc-field select:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 1px;
}

.calc-hint {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 14px;
}

.calc-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.calc-result {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 10px;
    background: var(--accent);
}

.calc-result span {
    color: var(--muted-foreground);
    font-size: 13px;
}

.calc-result output {
    font-size: 20px;
    font-weight: 700;
}

.calc-reverse {
    display: grid;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.calc-reverse output {
    font-weight: 700;
}

/* A drawn resistor whose bands show the selected colours. */
.resistor {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
}

.resistor .lead {
    width: 60px;
    height: 4px;
    background: #9aa3ad;
}

.resistor .body {
    display: flex;
    gap: 14px;
    align-items: stretch;
    height: 56px;
    padding: 0 26px;
    border-radius: 22px;
    background: #e8d3a8;
}

.resistor i {
    width: 12px;
}

.resistor i[hidden] {
    display: none;
}

.resistor i:last-child {
    margin-left: 18px;
}

.resistor i[data-color="black"] { background: #111111; }
.resistor i[data-color="brown"] { background: #7b4a2c; }
.resistor i[data-color="red"] { background: #d0312d; }
.resistor i[data-color="orange"] { background: #f28c28; }
.resistor i[data-color="yellow"] { background: #f5d000; }
.resistor i[data-color="green"] { background: #2e9d4f; }
.resistor i[data-color="blue"] { background: #2563eb; }
.resistor i[data-color="violet"] { background: #7c3aed; }
.resistor i[data-color="grey"] { background: #8c8c8c; }
.resistor i[data-color="white"] { background: #ffffff; box-shadow: inset 0 0 0 1px #c9c9c9; }
.resistor i[data-color="gold"] { background: linear-gradient(#e7c35a, #b8902d); }
.resistor i[data-color="silver"] { background: linear-gradient(#e6e6e6, #a8a8a8); }