/* ============================================================
   CatCalc - Concatenative RPN Calculator Styles
   ============================================================ */

:root {
    --seg-on: #00e676;
    --seg-off: rgba(0, 230, 118, 0.06);
    --seg-glow: 0 0 6px rgba(0, 230, 118, 0.5), 0 0 12px rgba(0, 230, 118, 0.2);
    --display-bg: #0a0f0a;
    --digit-w: 24px;
    --digit-h: 40px;
    --seg-t: 3px;
    --digit-gap: 4px;
    --dp-size: 3px;
    --btn-gap: 2px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    touch-action: manipulation;
    font-family: 'JetBrains Mono', monospace;
}

body.dark-mode {
    background: #121220;
}

/* ============================================================
   App Layout
   ============================================================ */

#app {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    padding: 4px;
    padding-top: max(4px, env(safe-area-inset-top));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
    gap: 2px;
}

/* ============================================================
   Display Area
   ============================================================ */

.display-area {
    background: var(--display-bg);
    border: 2px solid #1a2a1a;
    border-radius: 8px 8px 0 0;
    padding: 8px 4px 6px;
    flex-shrink: 0;
}

.display-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
}

/* ============================================================
   Stack View
   ============================================================ */

.stack-view {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--display-bg);
    border: 1px solid #1a2a1a;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: 0;
    flex-shrink: 0;
    height: 118px;
    overflow: hidden;
}

.stack-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2px 8px 0;
    overflow: hidden;
    min-height: 0;
}

.stack-item {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(0, 230, 118, 0.6);
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.25;
    flex-shrink: 0;
}

.stack-label {
    color: rgba(0, 230, 118, 0.3);
    min-width: 24px;
}

.stack-value {
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stack-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 8px;
    border-top: 1px solid #1a2a1a;
    flex-shrink: 0;
}

.lcd-indicators {
    display: flex;
    gap: 10px;
}

.lcd-ind {
    font-size: 9px;
    font-family: 'JetBrains Mono', monospace;
    color: rgba(0, 230, 118, 0.1);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.15s, text-shadow 0.15s;
    white-space: nowrap;
}

.lcd-ind.lit {
    color: var(--seg-on);
    text-shadow: var(--seg-glow);
}

/* ============================================================
   16-Segment Display - Digit
   ============================================================ */

.digit-container {
    position: relative;
    width: var(--digit-w);
    min-width: 0;
    height: var(--digit-h);
    flex-shrink: 1;
    margin-right: var(--digit-gap);
    overflow: visible;
}

.digit-container:last-child {
    margin-right: 0;
}

/* Segment base */
.seg {
    position: absolute;
    background: var(--seg-off);
    transition: background 0.06s, box-shadow 0.06s;
}

.seg.on {
    background: var(--seg-on);
    box-shadow: var(--seg-glow);
}

/* --- Horizontal segments --- */
/* a1: top-left horizontal */
.seg-a1 {
    top: 0;
    left: 3px;
    width: calc(50% - 4px);
    height: var(--seg-t);
    clip-path: polygon(15% 0%, 100% 0%, 95% 50%, 100% 100%, 15% 100%, 0% 50%);
}

/* a2: top-right horizontal */
.seg-a2 {
    top: 0;
    right: 3px;
    width: calc(50% - 4px);
    height: var(--seg-t);
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 5% 50%);
}

/* g1: middle-left horizontal */
.seg-g1 {
    top: calc(50% - var(--seg-t) / 2);
    left: 3px;
    width: calc(50% - 4px);
    height: var(--seg-t);
    clip-path: polygon(15% 0%, 100% 0%, 95% 50%, 100% 100%, 15% 100%, 0% 50%);
}

/* g2: middle-right horizontal */
.seg-g2 {
    top: calc(50% - var(--seg-t) / 2);
    right: 3px;
    width: calc(50% - 4px);
    height: var(--seg-t);
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 5% 50%);
}

/* d1: bottom-left horizontal */
.seg-d1 {
    bottom: 0;
    left: 3px;
    width: calc(50% - 4px);
    height: var(--seg-t);
    clip-path: polygon(15% 0%, 100% 0%, 95% 50%, 100% 100%, 15% 100%, 0% 50%);
}

/* d2: bottom-right horizontal */
.seg-d2 {
    bottom: 0;
    right: 3px;
    width: calc(50% - 4px);
    height: var(--seg-t);
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%, 5% 50%);
}

/* --- Vertical segments --- */
/* f: upper-left vertical */
.seg-f {
    top: 3px;
    left: 0;
    width: var(--seg-t);
    height: calc(50% - 4px);
    clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
}

/* b: upper-right vertical */
.seg-b {
    top: 3px;
    right: 0;
    width: var(--seg-t);
    height: calc(50% - 4px);
    clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
}

/* e: lower-left vertical */
.seg-e {
    bottom: 3px;
    left: 0;
    width: var(--seg-t);
    height: calc(50% - 4px);
    clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
}

/* c: lower-right vertical */
.seg-c {
    bottom: 3px;
    right: 0;
    width: var(--seg-t);
    height: calc(50% - 4px);
    clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
}

/* --- Center vertical segments --- */
/* i: upper-center vertical */
.seg-i {
    top: 4px;
    left: calc(50% - var(--seg-t) / 2);
    width: var(--seg-t);
    height: calc(50% - 6px);
    clip-path: polygon(0% 8%, 50% 0%, 100% 8%, 100% 92%, 50% 100%, 0% 92%);
}

/* l: lower-center vertical */
.seg-l {
    bottom: 4px;
    left: calc(50% - var(--seg-t) / 2);
    width: var(--seg-t);
    height: calc(50% - 6px);
    clip-path: polygon(0% 8%, 50% 0%, 100% 8%, 100% 92%, 50% 100%, 0% 92%);
}

/* --- Diagonal segments ---
   Each diagonal spans a full quadrant using clip-path to create
   a thin line from corner to center. The element fills the quadrant,
   and the polygon cuts out just the diagonal stripe.
   --seg-t controls the visual thickness of the line.
*/

/* h: upper-left diagonal (\  in top-left quadrant) */
.seg-h {
    top: 4px;
    left: 4px;
    width: calc(50% - 6px);
    height: calc(50% - 6px);
    clip-path: polygon(0 0, var(--seg-t) 0, 100% 100%, calc(100% - var(--seg-t)) 100%);
}

/* j: upper-right diagonal (/  in top-right quadrant) */
.seg-j {
    top: 4px;
    right: 4px;
    width: calc(50% - 6px);
    height: calc(50% - 6px);
    clip-path: polygon(calc(100% - var(--seg-t)) 0, 100% 0, var(--seg-t) 100%, 0 100%);
}

/* k: lower-left diagonal (/  in bottom-left quadrant) */
.seg-k {
    bottom: 4px;
    left: 4px;
    width: calc(50% - 6px);
    height: calc(50% - 6px);
    clip-path: polygon(calc(100% - var(--seg-t)) 0, 100% 0, var(--seg-t) 100%, 0 100%);
}

/* m: lower-right diagonal (\  in bottom-right quadrant) */
.seg-m {
    bottom: 4px;
    right: 4px;
    width: calc(50% - 6px);
    height: calc(50% - 6px);
    clip-path: polygon(0 0, var(--seg-t) 0, 100% 100%, calc(100% - var(--seg-t)) 100%);
}

/* Decimal point - centered in the gap between digits */
.seg-dp {
    bottom: 0;
    right: 0;
    width: var(--dp-size);
    height: var(--dp-size);
    border-radius: 50%;
    clip-path: none;
    /* Position: right edge of digit + half the gap - half the dot */
    transform: translateX(calc(var(--digit-gap) / 2 + var(--dp-size) / 2));
}

/* ============================================================
   Keypad
   ============================================================ */

.keypad {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: var(--btn-gap);
    padding: 0;
    min-height: 0;
}

.keypad .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    padding: 0;
    margin: 2px;
    /* Override Halfmoon's fixed height: 3.2rem and line-height: 3.2rem */
    height: auto;
    line-height: normal;
    min-height: 0;
    transition: background 0.1s, transform 0.05s;
}

.keypad .btn:active {
    transform: scale(0.95);
}

/* Button types — .keypad prefix needed to override Halfmoon's .dark-mode .btn */

/* Digits: neutral cool gray */
.keypad .btn-digit {
    background: #262636;
    color: #c0c0d0;
}
.keypad .btn-digit:hover { background: #323244; }
.keypad .btn-digit.disabled {
    background: #181824;
    color: #333340;
    pointer-events: none;
}

/* Arithmetic operators: muted teal */
.keypad .btn-op {
    background: #182830;
    color: #78b8b4;
}
.keypad .btn-op:hover { background: #203438; }

/* Stack ops (SWP/DUP/DRP) & FN toggle: muted indigo */
.keypad .btn-fn {
    background: #1c1830;
    color: #8880c0;
}
.keypad .btn-fn:hover { background: #242040; }

/* Base selectors (HEX/BIN/DEC): muted blue */
.keypad .btn-base {
    background: #161e2c;
    color: #6888b0;
    font-size: 0.75em;
    letter-spacing: 0.5px;
}
.keypad .btn-base:hover { background: #1c2838; }
.keypad .btn-base.active {
    background: #1c3050;
    color: #88b0d8;
    box-shadow: 0 0 8px rgba(80, 140, 220, 0.2);
}

/* PSH (push/enter): subdued green, still prominent */
.keypad .btn-enter {
    background: #1a3020;
    color: #68c070;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: inset 0 0 10px rgba(80, 180, 100, 0.06);
}
.keypad .btn-enter:hover { background: #244028; }

/* CLR: very subdued warm gray-red */
.keypad .btn-clr {
    background: #282024;
    color: #987070;
    font-size: 0.8em;
}
.keypad .btn-clr:hover { background: #302828; }

/* BS (backspace): soft amber */
.keypad .btn-back {
    background: #2a2418;
    color: #b89850;
    font-size: 0.8em;
}
.keypad .btn-back:hover { background: #343020; }

/* FN mode overlay buttons: muted purple */
.keypad .btn-fn-op {
    background: #221830;
    color: #a880b8;
    font-size: 0.85em;
}
.keypad .btn-fn-op:hover { background: #2c2040; }

/* SVG icons in buttons */
.btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ============================================================
   Error overlay
   ============================================================ */

.error-flash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 2px solid #ff1744;
    border-radius: 8px;
    animation: error-pulse 0.6s ease-out;
    opacity: 0;
}

@keyframes error-pulse {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ============================================================
   Responsive adjustments
   ============================================================ */

@media (max-height: 580px) {
    :root {
        --digit-w: 18px;
        --digit-h: 30px;
        --seg-t: 2px;
        --digit-gap: 3px;
        --dp-size: 2px;
        --btn-gap: 1px;
    }

    .display-area {
        padding: 3px 6px 2px;
    }

    .stack-view {
        height: 72px;
    }

    .stack-item {
        font-size: 9px;
    }

    .keypad .btn {
        font-size: 12px;
        border-radius: 3px;
    }
}

@media (min-height: 700px) {
    :root {
        --digit-w: 26px;
        --digit-h: 44px;
        --seg-t: 3.5px;
        --digit-gap: 4px;
        --dp-size: 3px;
    }

    .keypad .btn {
        font-size: 18px;
    }
}

@media (min-height: 800px) {
    :root {
        --digit-w: 28px;
        --digit-h: 48px;
        --seg-t: 3.5px;
        --digit-gap: 5px;
        --dp-size: 4px;
    }

    .keypad .btn {
        font-size: 20px;
    }
}

@media (min-height: 900px) {
    :root {
        --digit-w: 30px;
        --digit-h: 52px;
        --seg-t: 4px;
        --digit-gap: 5px;
        --dp-size: 4px;
        --btn-gap: 3px;
    }

    #app {
        padding: 6px;
        gap: 3px;
    }

    .keypad .btn {
        font-size: 24px;
        border-radius: 6px;
    }
}

@media (min-width: 500px) {
    :root {
        --digit-w: 30px;
        --digit-h: 50px;
        --seg-t: 4px;
        --digit-gap: 5px;
        --dp-size: 4px;
        --btn-gap: 3px;
    }

    #app {
        padding: 6px;
        gap: 3px;
    }

    .keypad .btn {
        border-radius: 6px;
        font-size: 17px;
    }
}