/* ---------------------------------------------------------------------- */
/* Tokens                                                                  */
/* ---------------------------------------------------------------------- */

.kc {
    /* Accent - overwritten at runtime by applyThemeColour(). */
    --kc-accent:             #24567a;
    --kc-accent-strong:      #1b4260;

    /* Body */
    --kc-surface:            #ededed;
    --kc-surface-border:     #dcdcdc;

    /* Screen - white, black digits. */
    --kc-screen-bg:          #ffffff;
    --kc-screen-bg-2:        #f7f8f8;
    --kc-screen-border:      #878787;
    --kc-screen-ink:         #111111;
    --kc-screen-muted:       #6b6b6b;
    --kc-screen-error:       #b3261e;

    /* Digits, parentheses and the decimal point - black. */
    --kc-digit-bg:           #17191b;
    --kc-digit-bg-hover:     #26292c;
    --kc-digit-border:       #0b0c0d;
    --kc-digit-edge:         #000000;
    --kc-digit-ink:          #ffffff;

    /* Operators - dark grey. */
    --kc-operator-bg:        #4e5255;
    --kc-operator-bg-hover:  #5a5f62;
    --kc-operator-border:    #35383a;
    --kc-operator-edge:      #2b2e30;
    --kc-operator-ink:       #ffffff;

    /* Clear - dark red. */
    --kc-danger:             #8c342c;
    --kc-danger-hover:       #9c3c33;
    --kc-danger-border:      #5f231d;
    --kc-danger-edge:        #4e1c17;
    --kc-danger-ink:         #ffffff;

    /* Equals - between the digit black and the operator grey. */
    --kc-equals-bg:          #3c4042;
    --kc-equals-bg-hover:    #474b4e;
    --kc-equals-border:      #26292b;
    --kc-equals-edge:        #1c1f20;
    --kc-equals-ink:         #ffffff;

    /*
     * Gloss overlay, capped at 14% white. Measured at the top of the gradient,
     * the lightest point: the operator grey holds 5.44:1 against its white
     * label there, and would drop to 4.45:1 at 22%.
     */
    --kc-gloss:              linear-gradient(180deg,
                                 rgba(255, 255, 255, 0.14) 0%,
                                 rgba(255, 255, 255, 0.04) 48%,
                                 rgba(0, 0, 0, 0.04) 52%,
                                 rgba(0, 0, 0, 0.13) 100%);

    --kc-drop:               rgba(0, 0, 0, 0.22);
    --kc-radius:             10px;
    --kc-key-radius:         7px;
    --kc-gap:                6px;

    display: flex;
    flex-direction: column;
    gap: var(--kc-gap);
    padding: 10px;
    border: 1px solid var(--kc-surface-border);
    border-radius: var(--kc-radius);
    background: var(--kc-surface);
    user-select: none;
}

/* ---------------------------------------------------------------------- */
/* Screen                                                                  */
/* ---------------------------------------------------------------------- */

/*
 * The grey frame is not decorative: a white screen on a #ededed body differ
 * by 1.28:1 in luminance, which cannot satisfy WCAG 2.2 SC 1.4.11 (3:1 for
 * the visual boundary of a control). The rule reaches 3.07:1 against the body
 * and 3.59:1 against the screen.
 */
.kc__screen {
    position: relative;
    padding: 9px 11px 8px;
    border: 1px solid var(--kc-screen-border);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--kc-screen-bg), var(--kc-screen-bg-2));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

/* Last evaluated expression, written with textContent only. */
.kc__history {
    min-height: 1.15em;
    margin-bottom: 1px;
    color: var(--kc-screen-muted);
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 0.68rem;
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}

.kc__display {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kc-screen-ink);
    font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-align: right;
    letter-spacing: 0.01em;
    caret-color: var(--kc-screen-ink);
    /* The container suppresses selection; the field must keep it. */
    -webkit-user-select: text;
    user-select: text;
}

.kc__display:focus,
.kc__display:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Thin focus underline instead of a ring, to keep the screen looking flat. */
.kc__screen:focus-within::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--kc-accent);
    opacity: 0.9;
}

/* Error state, driven by the data-calc-error attribute set by the widget. */
.kc__display[data-calc-error] {
    color: var(--kc-screen-error);
    animation: kc-shake 220ms ease-in-out;
}

@keyframes kc-shake {
      0% { transform: translateX(0); }
     25% { transform: translateX(-4px); }
     55% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* ---------------------------------------------------------------------- */
/* Keypad                                                                  */
/* ---------------------------------------------------------------------- */

.kc__pad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--kc-gap);
    /* Room for the 2px key edge plus its drop shadow on the bottom row. */
    padding-bottom: 4px;
}

/*
 * Base key = digits, parentheses and the decimal point. The four shadows are,
 * in order: the top highlight, the inner bottom shade, the solid side of the
 * key, and the drop shadow it casts on the body.
 */
.kc__key {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--kc-digit-border);
    border-radius: var(--kc-key-radius);
    background-color: var(--kc-digit-bg);
    background-image: var(--kc-gloss);
    color: var(--kc-digit-ink);
    font-size: 0.95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -2px 3px rgba(0, 0, 0, 0.22),
        0 2px 0 var(--kc-digit-edge),
        0 3px 4px var(--kc-drop);
    transition:
        background-color 120ms ease,
        transform 60ms ease,
        box-shadow 60ms ease;
}

.kc__key:hover {
    background-color: var(--kc-digit-bg-hover);
}

/* Pressed: the key drops onto its own edge and the sheen inverts. */
.kc__key:active {
    transform: translateY(2px);
    background-image: linear-gradient(180deg,
        rgba(0, 0, 0, 0.26) 0%,
        rgba(0, 0, 0, 0.06) 55%,
        rgba(255, 255, 255, 0.08) 100%);
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.45),
        0 0 0 var(--kc-digit-edge),
        0 1px 1px var(--kc-drop);
}

.kc__key:focus-visible {
    outline: 2px solid var(--kc-accent);
    outline-offset: 2px;
}

/* Operators: dark grey, lighter than the digits so the eye separates them. */
.kc__key--operator {
    border-color: var(--kc-operator-border);
    background-color: var(--kc-operator-bg);
    color: var(--kc-operator-ink);
    font-weight: 600;
    font-size: 1.02rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 3px rgba(0, 0, 0, 0.2),
        0 2px 0 var(--kc-operator-edge),
        0 3px 4px var(--kc-drop);
}

.kc__key--operator:hover {
    background-color: var(--kc-operator-bg-hover);
}

.kc__key--operator:active {
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.4),
        0 0 0 var(--kc-operator-edge),
        0 1px 1px var(--kc-drop);
}

/* Clear. */
.kc__key--danger {
    border-color: var(--kc-danger-border);
    background-color: var(--kc-danger);
    color: var(--kc-danger-ink);
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 3px rgba(0, 0, 0, 0.2),
        0 2px 0 var(--kc-danger-edge),
        0 3px 4px var(--kc-drop);
}

.kc__key--danger:hover {
    background-color: var(--kc-danger-hover);
}

.kc__key--danger:active {
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.4),
        0 0 0 var(--kc-danger-edge),
        0 1px 1px var(--kc-drop);
}

/* Equals: full width. */
.kc__key--equals {
    grid-column: 1 / -1;
    border-color: var(--kc-equals-border);
    background-color: var(--kc-equals-bg);
    color: var(--kc-equals-ink);
    font-size: 1.05rem;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        inset 0 -2px 3px rgba(0, 0, 0, 0.22),
        0 2px 0 var(--kc-equals-edge),
        0 3px 4px var(--kc-drop);
}

.kc__key--equals:hover {
    background-color: var(--kc-equals-bg-hover);
}

.kc__key--equals:active {
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.45),
        0 0 0 var(--kc-equals-edge),
        0 1px 1px var(--kc-drop);
}

/* ---------------------------------------------------------------------- */
/* Hint line                                                               */
/* ---------------------------------------------------------------------- */

.kc__hint {
    margin: 0;
    color: #4a4a4a;
    font-size: 0.66rem;
    line-height: 1.3;
    text-align: left;
    padding: 4px 6px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
}

.kc__hint kbd {
    padding: 0 4px;
    border: 1px solid #c2c2c2;
    border-bottom-width: 2px;
    border-radius: 3px;
    background: #ffffff;
    color: #333333;
    font-size: 0.66rem;
    font-family: inherit;
}

/* ---------------------------------------------------------------------- */
/* Small screens                                                           */
/* ---------------------------------------------------------------------- */

@media (max-width: 400px) {
    .kc {
        --kc-gap: 5px;
        padding: 8px;
    }

    .kc__display {
        font-size: 1.25rem;
    }

    .kc__key {
        min-height: 36px;
        font-size: 0.88rem;
    }
}

/* ---------------------------------------------------------------------- */
/* Accessibility preferences                                               */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .kc__key,
    .kc__display[data-calc-error] {
        transition: none;
        animation: none;
    }

    .kc__key:active {
        transform: none;
    }
}

/*
 * High contrast: the gloss is dropped rather than tuned. A gradient moves the
 * effective background colour under the label, which is exactly what this
 * preference asks us not to do.
 */
@media (prefers-contrast: more) {
    .kc {
        --kc-gloss:           none;
        --kc-digit-bg:        #000000;
        --kc-operator-bg:     #3f4346;
        --kc-operator-border: #000000;
        --kc-equals-bg:       #2b2e30;
        --kc-danger:          #7a2b24;
        --kc-danger-border:   #3d1511;
        --kc-screen-border:   #000000;
        --kc-screen-muted:    #4a4a4a;
    }

    .kc__key {
        text-shadow: none;
    }

    .kc__hint {
        color: #2b2b2b;
    }
}