/* ============================================
   iOS Calculator — Faithful Recreation
   Dark theme, SF Pro-like rounded buttons,
   orange accent operators
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500&family=Nunito:wght@300;400;500;600&display=swap');

/* ── Reset ──────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --bg:           #000000;
    --display-text: #ffffff;
    --btn-dark:     #333333;    /* number buttons */
    --btn-mid:      #a5a5a5;    /* function buttons (C, +/-, %) */
    --btn-orange:   #ff9f0a;    /* operator buttons */
    --btn-dark-press:  #737373;
    --btn-mid-press:   #d4d4d2;
    --btn-orange-press:#ffd478;
    --btn-text-dark:   #ffffff;
    --btn-text-mid:    #000000;
    --btn-text-orange: #ffffff;
    --radius-btn:   50%;        /* circle buttons */
    --btn-size:     80px;
    --gap:          12px;
    --transition:   .08s ease;
}

/* ── Body / Page ────────────────────────────── */
html, body {
    height: 100%;
}

body {
    background: var(--bg);
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

/* ── Main wrapper ───────────────────────────── */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 380px;
}

/* ── Calculator container ───────────────────── */
.calculator-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* ── Display ────────────────────────────────── */
.calculator-display {
    font-family: 'Nunito', -apple-system, sans-serif;
    font-size: 5rem;
    font-weight: 300;
    color: var(--display-text);
    text-align: right;
    padding: 0 .5rem;
    line-height: 1.1;
    min-height: 7rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    word-break: break-all;
    overflow: hidden;
    transition: font-size .15s ease;
}

/* Shrink font if number is long */
.calculator-display.long {
    font-size: 3rem;
}

/* ── Button grid ────────────────────────────── */
.calculator-grid {
    display: grid;
    grid-template-columns: repeat(4, var(--btn-size));
    gap: var(--gap);
    justify-content: center;
}

/* ── Base button ────────────────────────────── */
button {
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: var(--radius-btn);
    border: none;
    cursor: pointer;
    font-family: 'Nunito', -apple-system, sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter var(--transition), transform var(--transition);
    position: relative;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

button:active {
    transform: scale(.93);
    filter: brightness(1.25);
}

/* ── Number buttons ─────────────────────────── */
button[data-value] {
    background: var(--btn-dark);
    color: var(--btn-text-dark);
}

button[data-value]:active {
    background: var(--btn-dark-press);
}

/* ── Function buttons: C, +/-, % ────────────── */
button[data-action="clear"],
button[data-operator="plus-minus"],
button[data-operator="%"] {
    background: var(--btn-mid);
    color: var(--btn-text-mid);
    font-weight: 500;
}

button[data-action="clear"]:active,
button[data-operator="plus-minus"]:active,
button[data-operator="%"]:active {
    background: var(--btn-mid-press);
}

/* ── Operator buttons: /, x, -, +, = ───────── */
button[data-operator="/"],
button[data-operator="*"],
button[data-operator="-"],
button[data-operator="+"],
button[data-action="calculate"] {
    background: var(--btn-orange);
    color: var(--btn-text-orange);
    font-size: 2.2rem;
    font-weight: 600;
}

button[data-operator="/"]:active,
button[data-operator="*"]:active,
button[data-operator="-"]:active,
button[data-operator="+"]:active,
button[data-action="calculate"]:active {
    background: var(--btn-orange-press);
    color: var(--btn-orange);
}

/* ── 0 button spans 2 grid columns (iOS style) ── */
button.span-two {
    grid-column: span 2;
    width: 100%;
    border-radius: calc(var(--btn-size) / 2);
    justify-content: flex-start;
    padding-left: calc(var(--btn-size) * .38);
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 380px) {
    :root {
        --btn-size: 72px;
        --gap: 10px;
    }

    .calculator-display {
        font-size: 4rem;
        min-height: 5.5rem;
    }
}

@media (max-width: 320px) {
    :root {
        --btn-size: 62px;
        --gap: 8px;
    }

    .calculator-display {
        font-size: 3.2rem;
    }
}