/* ═══════════════════════════════════════════════════════════════════════════
   SciFi Calc – Style sheet
   ═══════════════════════════════════════════════════════════════════════════

   Design goals
   ─────────────
   • Portrait-phone proportions (≈ 9 : 19.5, like an iPhone 14 Pro) on every
     screen.  On mobile the calculator fills the viewport.  On tablet/desktop
     it appears as a centred card.
   • Sci-fi dark theme with electric-cyan accents, subtle glows, and a clean
     monospace display.
   • All layout expressed with CSS Grid + custom properties so every section
     (scientific, basic) is independently adjustable.

   Theming
   ────────
   Override the variables in :root to change the entire look without touching
   any other rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & base ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: -apple-system, 'SF Pro Display', 'Segoe UI', system-ui,
               'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Design tokens ──────────────────────────────────────────────────────── */

:root {
  /* Palette */
  --clr-bg:            #000;
  --clr-body:          #0d1220;
  --clr-surface:       #111827;
  --clr-surface-2:     #1e2a3a;
  --clr-border:        rgba(0, 210, 255, 0.12);
  --clr-accent:        #00d2ff;
  --clr-accent-dim:    rgba(0, 210, 255, 0.18);
  --clr-text:          #e8f4fd;
  --clr-text-dim:      #6b8caa;

  /* Button colours */
  --btn-num-bg:        #1a2740;
  --btn-num-text:      #e8f4fd;
  --btn-num-hover:     #243552;

  --btn-op-bg:         #163153;
  --btn-op-text:       #7dd3fc;
  --btn-op-hover:      #1e4470;

  --btn-eq-bg:         #0369a1;
  --btn-eq-text:       #e0f2fe;
  --btn-eq-hover:      #0284c7;
  --btn-eq-glow:       rgba(3, 105, 161, 0.55);

  --btn-ctrl-bg:       #1f1f2e;
  --btn-ctrl-text:     #f87171;
  --btn-ctrl-hover:    #2e2e40;

  --btn-sci-bg:        #0f1e30;
  --btn-sci-text:      #38bdf8;
  --btn-sci-hover:     #162b44;

  --btn-const-bg:      #0f1e30;
  --btn-const-text:    #a78bfa;
  --btn-const-hover:   #1a2b45;

  --btn-bracket-bg:    #0f1e30;
  --btn-bracket-text:  #94a3b8;
  --btn-bracket-hover: #162b44;

  --btn-mem-bg:        #1a1a30;
  --btn-mem-text:      #c084fc;
  --btn-mem-hover:     #242445;

  --btn-mode-bg:       #12312a;
  --btn-mode-text:     #34d399;
  --btn-mode-hover:    #1a4a3a;

  /* Display */
  --display-bg:        #080e18;
  --display-primary:   #e8f4fd;
  --display-secondary: #4a7a9b;

  /* Layout */
  --gap:          5px;
  --btn-radius:   10px;
  --outer-pad:    8px;

  /* Phone target aspect ratio (width : height) */
  --phone-ratio:  calc(9 / 19.5);
}

/* ── App shell – centred phone card ─────────────────────────────────────── */

#app {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100vw;
  height:          100vh;
  height:          100dvh;
  background:      var(--clr-bg);
}

/* The calculator maintains phone proportions on large screens. */
.calculator {
  /*
   * Width  = min(viewport-width, viewport-height × phone-ratio)
   * Height is derived from the aspect-ratio property.
   */
  width:        min(100vw, calc(100dvh * var(--phone-ratio)));
  aspect-ratio: 9 / 19.5;
  max-height:   100dvh;

  display:        flex;
  flex-direction: column;
  background:     var(--clr-body);
  overflow:       hidden;
  position:       relative;
}

/* Phone-style rounded card on large screens */
@media (min-height: 700px) and (min-width: 500px) {
  .calculator {
    border-radius: 36px;
    box-shadow:
      0 0 0 1px var(--clr-border),
      0 0 40px rgba(0, 210, 255, 0.07),
      0 30px 60px rgba(0, 0, 0, 0.7);
  }
}

/* ── Display section ────────────────────────────────────────────────────── */

.display-section {
  flex:            0 0 auto;
  background:      var(--display-bg);
  padding:         12px var(--outer-pad) 14px;
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  gap:             4px;
  border-bottom:   1px solid var(--clr-border);
  min-height:      140px;
  position:        relative;
}

/* Status row: angle mode + memory indicator */
.display-status {
  display:         flex;
  align-items:     center;
  gap:             8px;
  width:           100%;
  justify-content: flex-start;
  margin-bottom:   4px;
}

.badge {
  font-size:    0.6rem;
  font-weight:  700;
  letter-spacing: 0.08em;
  padding:      2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge-mode {
  background: rgba(52, 211, 153, 0.15);
  color:       #34d399;
  border:      1px solid rgba(52, 211, 153, 0.3);
}

.badge-mem {
  background: rgba(192, 132, 252, 0.15);
  color:       #c084fc;
  border:      1px solid rgba(192, 132, 252, 0.3);
}

/* Secondary (expression / live-result) line */
.display-secondary {
  font-size:      0.85rem;
  color:          var(--display-secondary);
  min-height:     1.2em;
  width:          100%;
  text-align:     right;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
  font-family:    'SF Mono', 'Consolas', 'Menlo', monospace;
  transition:     color 0.2s;
}

/* Primary (current value / result) display */
.display-primary {
  font-family:    'SF Mono', 'Consolas', 'Menlo', monospace;
  font-weight:    300;
  color:          var(--display-primary);
  width:          100%;
  text-align:     right;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
  line-height:    1.1;
  margin-top:     auto;
  /* Soft directional glow – avoids the "circled digit" appearance */
  text-shadow:    0 1px 12px rgba(0, 210, 255, 0.20);
  transition:     font-size 0.15s ease;
}

/* Responsive font sizes driven by data-size attribute (set in app.js) */
.display-primary[data-size="lg"] { font-size: clamp(2.6rem, 12vw, 4.2rem); }
.display-primary[data-size="md"] { font-size: clamp(2.0rem, 8vw,  3.0rem); }
.display-primary[data-size="sm"] { font-size: clamp(1.6rem, 6vw,  2.2rem); }
.display-primary[data-size="xs"] { font-size: clamp(1.1rem, 4vw,  1.6rem); }

/* ── Buttons wrapper ────────────────────────────────────────────────────── */

.buttons-section {
  flex:       1 1 0;
  display:    flex;
  flex-direction: column;
  padding:    var(--gap) var(--outer-pad) var(--outer-pad);
  gap:        var(--gap);
  min-height: 0;
  overflow:   hidden;
}

/* ── Scientific grid ────────────────────────────────────────────────────── */

.grid-scientific {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   var(--gap);
  flex:                  4 0 0;
  grid-auto-rows:        1fr;
}

/* ── Basic calculator grid ──────────────────────────────────────────────── */

.grid-divider {
  height:       1px;
  background:   var(--clr-border);
  flex-shrink:  0;
}

.grid-basic {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--gap);
  flex:                  5 0 0;
  /* Ensure rows fill the available space evenly */
  grid-auto-rows:        1fr;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border:           none;
  border-radius:    var(--btn-radius);
  font-family:      inherit;
  font-size:        clamp(0.7rem, 2.8vw, 1.05rem);
  font-weight:      500;
  cursor:           pointer;
  outline:          none;
  transition:       background-color 0.12s ease,
                    transform        0.08s ease,
                    box-shadow       0.12s ease;
  -webkit-tap-highlight-color: transparent;
  /* Prevent text overflow in tight grids */
  line-height: 1;
  white-space: nowrap;
}

/* Scientific section buttons are slightly smaller text */
.grid-scientific .btn {
  font-size: clamp(0.75rem, 2.8vw, 1.0rem);
}

/* ── Per-type colour themes ─────────────────────────────────────────────── */

.btn-num {
  background: var(--btn-num-bg);
  color:      var(--btn-num-text);
}
.btn-num:hover  { background: var(--btn-num-hover); }

.btn-op {
  background: var(--btn-op-bg);
  color:      var(--btn-op-text);
}
.btn-op:hover  { background: var(--btn-op-hover); }

.btn-eq {
  background:  var(--btn-eq-bg);
  color:       var(--btn-eq-text);
  font-size:   clamp(1rem, 3.5vw, 1.3rem);
  font-weight: 600;
  box-shadow:  0 0 12px var(--btn-eq-glow);
}
.btn-eq:hover {
  background: var(--btn-eq-hover);
  box-shadow: 0 0 18px var(--btn-eq-glow);
}

.btn-ctrl {
  background: var(--btn-ctrl-bg);
  color:      var(--btn-ctrl-text);
}
.btn-ctrl:hover { background: var(--btn-ctrl-hover); }

.btn-sci {
  background: var(--btn-sci-bg);
  color:      var(--btn-sci-text);
}
.btn-sci:hover { background: var(--btn-sci-hover); }

.btn-const {
  background: var(--btn-const-bg);
  color:      var(--btn-const-text);
}
.btn-const:hover { background: var(--btn-const-hover); }

.btn-bracket {
  background: var(--btn-bracket-bg);
  color:      var(--btn-bracket-text);
  font-size:  clamp(0.8rem, 2.5vw, 1.1rem);
}
.btn-bracket:hover { background: var(--btn-bracket-hover); }

.btn-mem {
  background: var(--btn-mem-bg);
  color:      var(--btn-mem-text);
  font-size:  clamp(0.7rem, 2.4vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.btn-mem:hover { background: var(--btn-mem-hover); }

.btn-mode {
  background: var(--btn-mode-bg);
  color:      var(--btn-mode-text);
  font-size:  clamp(0.7rem, 2.4vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.btn-mode:hover { background: var(--btn-mode-hover); }

/* ── Press animation ────────────────────────────────────────────────────── */

.btn:active,
.btn.pressed {
  transform:  scale(0.91);
  filter:     brightness(1.25);
}

/* Subtle inner glow on active operator / equals */
.btn-op:active,
.btn-op.pressed {
  box-shadow: inset 0 0 8px rgba(125, 211, 252, 0.3);
}

.btn-eq:active,
.btn-eq.pressed {
  box-shadow: 0 0 24px var(--btn-eq-glow);
}

/* ── Ambient scan-line overlay (purely decorative) ──────────────────────── */

.calculator::before {
  content:  '';
  position: absolute;
  inset:    0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 210, 255, 0.015) 3px,
    rgba(0, 210, 255, 0.015) 4px
  );
  pointer-events: none;
  z-index:  10;
  border-radius: inherit;
}

/* ── Notch / status-bar spacer for real phones ──────────────────────────── */

@supports (padding-top: env(safe-area-inset-top)) {
  .display-section {
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .buttons-section {
    padding-bottom: calc(var(--outer-pad) + env(safe-area-inset-bottom));
  }
}

/* ── Accessibility: reduce motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .btn           { transition: none; }
  .display-primary { transition: none; }
}

/* ── Mobile: fill the full viewport ────────────────────────────────────── */

@media (max-width: 500px) {
  .calculator {
    width:        100%;
    height:       100dvh;
    aspect-ratio: unset;
    border-radius: 0;
  }
}