/* ==========================================================================
   360 Universal Calculator — display, keypad and the three size modes
   ========================================================================== */

.view--calculator { gap: var(--gap); position: relative; }

/* On a phone the scientific keypad is taller than the screen by design, so a
   soft fade at the bottom hints that more keys are one swipe away. */
@media (max-width: 900px) and (max-height: 950px) {
    .view--calculator::after {
        content: "";
        position: sticky;
        bottom: 0;
        display: block;
        height: 18px;
        margin-top: -18px;
        pointer-events: none;
        background: linear-gradient(to bottom, transparent, var(--bg));
    }
}

.calc-shell {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-height: 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Display
   -------------------------------------------------------------------------- */

.calc-display {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    padding: 16px 18px 12px;
    min-height: clamp(80px, 14vh, 140px);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.calc-display__history {
    min-height: 1.2em;
    color: var(--muted);
    font-size: .9rem;
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
}

.calc-display__current {
    font-size: clamp(1.9rem, 8vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    text-align: end;
    word-break: break-all;
    overflow-wrap: anywhere;
    direction: ltr;
    unicode-bidi: plaintext;
    transition: font-size .15s ease;
}

/* Long results shrink instead of overflowing. */
.calc-display__current[data-digits="13"],
.calc-display__current[data-digits="14"],
.calc-display__current[data-digits="15"],
.calc-display__current[data-digits="16"] { font-size: clamp(1.5rem, 6vw, 2.2rem); }
.calc-display__current[data-digits="17"],
.calc-display__current[data-digits="18"],
.calc-display__current[data-digits="19"],
.calc-display__current[data-digits="20"] { font-size: clamp(1.15rem, 4.5vw, 1.6rem); }

.calc-display__current.is-error { color: var(--danger-text); font-size: clamp(1.1rem, 4.5vw, 1.6rem); }

.calc-display__status {
    min-height: 1em;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: start;
}

.calc-display__tools { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; gap: 6px; }

.ghost-btn {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--key-bg);
    color: var(--key-text);
    font-size: .8rem;
    font-weight: 700;
}

.ghost-btn:hover { background: color-mix(in srgb, var(--accent) 18%, var(--key-bg)); }

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

.keypad {
    flex: 1;
    display: grid;
    gap: 7px;
    min-height: 0;
    /* Rows share the available height equally and shrink instead of pushing
       the keypad past the bottom of the screen. */
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
}

.key {
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: var(--radius-md);
    background: var(--key-bg);
    color: var(--key-text);
    font-size: 1.35rem;
    font-weight: 700;
    min-height: 0;
    user-select: none;
    transition: transform .08s ease, filter .15s ease, background-color .15s ease;
}

.key:hover { filter: brightness(.97); }
.key:active { transform: scale(.96); }

.key--func {
    background: color-mix(in srgb, var(--accent) 12%, var(--key-bg));
    color: color-mix(in srgb, var(--accent) 75%, var(--key-text));
    font-size: 1rem;
}

.key--const { background: color-mix(in srgb, var(--accent) 8%, var(--key-bg)); font-size: 1.05rem; }

.key--op { background: var(--op-bg); color: var(--op-text); font-size: 1.5rem; }

.key--cmd { font-size: .95rem; }
.key--danger { background: var(--danger-bg); color: var(--danger-text); }
.key--mem { background: color-mix(in srgb, var(--accent) 16%, var(--key-bg)); font-size: .95rem; }

.key--equals { background: var(--accent); color: var(--accent-text); font-size: 1.6rem; }
.key--equals:hover { filter: brightness(1.08); }

/* The equals key is always the accent key; extra-large mode makes it green
   so it stands out for users who struggle to tell the operations apart. */
[data-size="xl"] .key--equals { background: #16a34a; color: #ffffff; }

/* --------------------------------------------------------------------------
   Short screens: advertising gives way to the calculator.
   On a phone the display, five key rows, the header and the navigation need
   roughly 560 px, so the slots are dropped before any key can slide off screen.
   -------------------------------------------------------------------------- */

@media (max-height: 780px) {
    .ad-slot--leaderboard { display: none; }
}

@media (max-height: 860px) {
    .view--calculator .ad-slot--inline { display: none; }
}

/* A slot the visitor closed must stay closed no matter what the rules above
   or below say. */
.ad-slot[data-ad-state="hidden"] { display: none !important; }

.key--wide { grid-column: span 2; justify-content: start; padding-inline-start: 22px; }

[dir="rtl"] .key--wide { justify-content: end; padding-inline-start: 0; padding-inline-end: 22px; }

/* --------------------------------------------------------------------------
   Size modes
   Row heights are expressed as a share of the viewport so the five keypad
   rows always fit between the display and the bottom navigation, with a
   comfortable cap on tall screens and a floor on short ones.
   -------------------------------------------------------------------------- */

/* Medium — the everyday layout: five columns for both modes. */
[data-size="md"] .view--calculator .keypad { grid-template-columns: repeat(5, minmax(0, 1fr)); }
[data-size="md"] .view--calculator .keypad { grid-auto-rows: minmax(0, min(9vh, 78px)); }
[data-size="md"] .key { min-height: 0; font-size: 1.3rem; }

/* Small — compact calculator that fits beside other content. */
[data-size="sm"] .calc-shell { max-width: 360px; }
[data-size="sm"] .calc-display { min-height: 76px; }
[data-size="sm"] .calc-display__current { font-size: clamp(1.4rem, 6vw, 2rem); }
[data-size="sm"] .view--calculator .keypad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
[data-size="sm"] .view--calculator .keypad { grid-auto-rows: minmax(0, min(8vh, 66px)); }
[data-size="sm"] .key { min-height: 0; font-size: 1rem; border-radius: 12px; }
[data-size="sm"] .key--func,
[data-size="sm"] .key--cmd { font-size: .72rem; }
[data-size="sm"] .key--op { font-size: 1.15rem; }
[data-size="sm"] .key--equals { font-size: 1.2rem; }

/* Extra large — made for older eyes: five big columns, tall keys, and only
   one ad slot so the keypad never hides under the navigation bar. */
[data-size="xl"] .calc-shell { max-width: 820px; }
[data-size="xl"] .view--calculator { padding: 10px; }
[data-size="xl"] .calc-display { min-height: 104px; }
[data-size="xl"] .calc-display__current { font-size: clamp(2.3rem, 10vw, 4.2rem); font-weight: 800; }
[data-size="xl"] .calc-display__history { font-size: 1.1rem; }
[data-size="xl"] .view--calculator .keypad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
[data-size="xl"] .view--calculator .keypad { grid-auto-rows: minmax(0, min(9vh, 78px)); }
[data-size="xl"] .key { min-height: 0; font-size: clamp(1.4rem, 4.6vw, 2.2rem); border-radius: 18px; }
[data-size="xl"] .key--cmd,
[data-size="xl"] .key--func,
[data-size="xl"] .key--mem { font-size: clamp(.9rem, 2.3vw, 1.2rem); }
[data-size="xl"] .key--op,
[data-size="xl"] .key--equals { font-size: clamp(1.8rem, 5vw, 2.6rem); }
[data-size="xl"] .view--calculator .ad-slot--inline { display: none; }
[data-size="xl"] .view--calculator .ad-slot--leaderboard { min-height: 60px; }

/* In extra-large mode the scientific keypad keeps only its most useful keys. */
[data-size="xl"] .keypad[data-mode="scientific"] .key--secondary { display: none; }

/* --------------------------------------------------------------------------
   Landscape phones
   -------------------------------------------------------------------------- */

@media (max-height: 560px) and (orientation: landscape) {
    .view--calculator { flex-direction: row; align-items: stretch; }
    .calc-shell { flex-direction: row; max-width: none; gap: 10px; }
    .calc-display { flex: 0 0 38%; min-height: 0; }
    .keypad { flex: 1; }
    .key { min-height: 34px; font-size: 1rem; }
    [data-size="xl"] .key { min-height: 40px; font-size: 1.2rem; }
    .view--calculator .ad-slot { display: none; }
}

/* --------------------------------------------------------------------------
   Very wide screens: two columns so the keypad never looks stretched
   -------------------------------------------------------------------------- */

@media (min-width: 1100px) {
    .calc-shell { max-width: 880px; flex-direction: row; align-items: stretch; }
    .calc-display { flex: 0 0 40%; justify-content: center; }
    .keypad { flex: 1; }
}