/* =============================================
   LuxTool — /calculators/simple-calculator/simple-calculator.css
   Tool-specific styles unique to this tool. Site chrome and
   every shared building block used on this page come from
   /style.css, which this page also loads.

   Design: iOS-Calculator inspired (circular keypad, big display,
   slide-out history panel) reskinned in LuxTool's gold/dark theme.
   ============================================= */

/* ── STANDALONE-PAGE OVERRIDE ──
   style.css defines .calc-tool-page / .calc-panel-inner to fill
   exactly one viewport (height: calc(100vh - navH); overflow:hidden)
   for use inside the SPA's full-screen tool overlay. This page has
   no such overlay, so that rule was clipping the content below the
   calculator. Reset it back to normal, scrollable page flow here. */
.calc-tool-page {
  height: auto;
  overflow: visible;
  display: block;
}

.calc-panel-inner {
  flex-grow: 0;
  max-height: none;
  overflow: visible;
}

/* ── LAYOUT ── */
.calc-layout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.calc-panel-inner {
  width: 100%;
  max-width: 440px;
  padding: 1.3rem;
  border-radius: 1.6rem;
  margin: 0;
}

.calc-panel-inner.scientific-mode {
  max-width: 720px;
}

.calc-panel-inner.scientific-mode .calc-main-area {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 1rem;
  align-items: start;
}

/* ── TOP CONTROLS ── */
.calc-top-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .9rem;
  gap: .5rem;
}

.calc-mode-group {
  display: flex;
  gap: .4rem;
}

/* ── DISPLAY (big, right-aligned, iOS-style weight) ── */
.calc-display-area {
  background: rgba(5, 7, 15, .55);
  border: 1px solid var(--gold-dim);
  border-radius: 1.2rem;
  padding: 1.4rem 1.3rem 1.1rem;
  margin-bottom: 1.1rem;
  text-align: right;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.calc-expr {
  font-size: .85rem;
  font-weight: 400;
  color: var(--muted);
  min-height: 1.2rem;
  word-break: break-all;
}

.calc-result {
  font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 300;
  color: var(--text);
  word-break: break-all;
  letter-spacing: -.5px;
  line-height: 1.05;
}

/* ── MEMORY ROW ── */
.calc-mem-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: .7rem;
}

.calc-btn.mem {
  font-size: .72rem;
  padding: .55rem;
  color: var(--muted);
  border-radius: .8rem;
  aspect-ratio: auto;
}

/* ── SCIENTIFIC GRID ── */
.calc-sci-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: .6rem;
}

.calc-btn.sci {
  font-size: .85rem;
  padding: .8rem .4rem;
  background: rgba(5, 7, 15, .5);
  border-radius: .8rem;
  aspect-ratio: auto;
}

/* ── MAIN KEYPAD (iOS-style circular keys) ── */
.calc-main-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
}

.calc-btn {
  padding: 1rem;
  background: rgba(30, 41, 59, .7);
  border: 1px solid var(--gold-dim);
  border-radius: .65rem;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter .12s ease, background .15s ease, transform .1s ease;
  touch-action: manipulation;
}

.calc-main-grid .calc-btn {
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.calc-btn:hover {
  filter: brightness(1.15);
}

.calc-btn:active {
  transform: scale(.93);
  filter: brightness(1.3);
}

/* Operators — gold accent circles, iOS-orange role */
.calc-btn.op {
  color: #0f172a;
  background: linear-gradient(135deg, var(--gold), #facc15);
  border-color: transparent;
}

.calc-btn.op:hover {
  filter: brightness(1.08);
}

/* Clear — spans 2 cols like iOS "AC", stays a pill not a circle */
.calc-main-grid .calc-btn[data-val="C"] {
  grid-column: span 2;
  aspect-ratio: auto;
  border-radius: 2rem;
  background: rgba(248, 113, 113, .14);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, .3);
  font-size: 1rem;
}

/* Equals — the standout gold gradient key */
.calc-main-grid .calc-btn[data-val="="] {
  background: linear-gradient(135deg, #fbbf24, #facc15);
  color: #0f172a;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 4px 16px var(--gold-glow);
}

/* ± sign, slightly muted like iOS light-gray keys */
.calc-main-grid .calc-btn[data-val="±"] {
  background: rgba(148, 163, 184, .18);
  color: var(--text);
}

/* ── HISTORY PANEL ──
   Sits beside the calculator on wide screens, collapses to a
   bottom sheet on narrow ones (see media query below). */
.calc-history-panel {
  width: 290px;
  flex-shrink: 0;
  background: rgba(15, 23, 42, .75);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  padding: 1.1rem;
}

.calc-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: .7rem;
  margin-bottom: .7rem;
  border-bottom: 1px solid var(--border);
}

.calc-history-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

.calc-history-clear {
  background: none;
  border: none;
  color: #fca5a5;
  font-size: .72rem;
  cursor: pointer;
  opacity: .85;
}

.calc-history-clear:hover {
  opacity: 1;
}

.calc-history-list {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-right: 2px;
}

.calc-history-list::-webkit-scrollbar {
  width: 4px;
}

.calc-history-list::-webkit-scrollbar-thumb {
  background: var(--gold-dim);
  border-radius: 4px;
}

.hist-item {
  padding: .6rem .7rem;
  background: rgba(30, 41, 59, .5);
  border-radius: .8rem;
  cursor: pointer;
  transition: background .15s;
}

.hist-item:hover {
  background: rgba(251, 191, 36, .1);
}

.hist-item .hist-expr {
  font-size: .75rem;
  color: var(--muted);
  text-align: right;
  word-break: break-all;
}

.hist-item .hist-res {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  text-align: right;
  word-break: break-all;
}

.history-empty {
  text-align: center;
  color: var(--muted);
  font-size: .75rem;
  padding: 1.5rem 0;
}

/* ── RELATED CALCULATORS PANEL ── */
.calc-related-panel {
  width: 270px;
  flex-shrink: 0;
  background: rgba(15, 23, 42, .75);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  padding: 1.1rem;
}

.calc-related-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
  padding-bottom: .7rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

.calc-related-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.calc-related-list a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .6rem;
  border-radius: .7rem;
  color: var(--text);
  text-decoration: none;
  font-size: .84rem;
  transition: background .15s, color .15s;
}

.calc-related-list a:hover {
  background: rgba(251, 191, 36, .12);
  color: var(--gold);
}

.calc-related-list .cr-icon {
  width: 26px;
  flex-shrink: 0;
  text-align: center;
  font-size: .78rem;
  color: var(--gold);
  opacity: .9;
}

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .calc-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .calc-panel-inner {
    order: 1;
  }

  .calc-related-panel {
    order: 2;
  }

  .calc-history-panel {
    order: 3;
  }

  .calc-panel-inner,
  .calc-panel-inner.scientific-mode {
    max-width: 420px;
    margin: 0 auto;
  }

  .calc-panel-inner.scientific-mode .calc-main-area {
    display: block;
  }

  .calc-related-panel,
  .calc-history-panel {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .calc-main-grid {
    gap: .45rem;
  }

  .calc-result {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
  }
}

/* ── DESKTOP: FIT TO VIEWPORT, NO PAGE SCROLL FOR THE CALCULATOR ITSELF ──
   Above 820px we have real vertical space to lose, so shrink the whole
   keypad using vh-based sizing instead of fixed rem values. Everything
   scales down smoothly as the window gets shorter, so the calculator
   stays fully visible without scrolling on typical desktop screens. */
@media (min-width: 821px) {
  .tool-head {
    margin-bottom: clamp(.8rem, 1.8vh, 1.5rem);
  }

  .tool-head-icon {
    width: clamp(48px, 6.5vh, 64px);
    height: clamp(48px, 6.5vh, 64px);
    font-size: clamp(1.7rem, 3.2vh, 2.2rem);
  }

  .tool-head h1 {
    font-size: clamp(1.4rem, 2.8vh, 1.8rem);
  }

  .calc-panel-inner {
    padding: clamp(1.2rem, 2.2vh, 1.7rem);
  }

  .calc-top-controls {
    margin-bottom: clamp(.7rem, 1.5vh, 1rem);
  }

  .calc-display-area {
    min-height: clamp(96px, 14vh, 140px);
    padding: clamp(1rem, 2vh, 1.5rem) clamp(1.1rem, 1.9vh, 1.5rem) clamp(.8rem, 1.4vh, 1.2rem);
    margin-bottom: clamp(.9rem, 1.7vh, 1.3rem);
  }

  .calc-result {
    font-size: clamp(2.3rem, 6vh, 3.4rem);
  }

  .calc-expr {
    font-size: clamp(.82rem, 1.5vh, .95rem);
  }

  .calc-mem-row {
    margin-bottom: clamp(.5rem, 1.1vh, .8rem);
  }

  .calc-btn.mem {
    padding: clamp(.5rem, 1.1vh, .65rem);
  }

  .calc-sci-grid {
    gap: clamp(.45vh, .9vh, .6rem);
  }

  .calc-btn.sci {
    padding: clamp(.65rem, 1.6vh, .95rem) .5rem;
    font-size: clamp(.8rem, 1.7vh, .95rem);
  }

  .calc-main-grid {
    grid-template-columns: repeat(4, clamp(58px, 8vh, 84px));
    grid-auto-rows: clamp(58px, 8vh, 84px);
    gap: clamp(.55rem, 1.2vh, .8rem);
    justify-content: center;
  }

  .calc-main-grid .calc-btn {
    width: auto;
    height: auto;
    font-size: clamp(1.15rem, 2.9vh, 1.5rem);
  }

  .calc-main-grid .calc-btn[data-val="C"] {
    grid-column: span 2;
  }

  .calc-related-panel,
  .calc-history-panel {
    max-height: clamp(420px, 80vh, 700px);
    overflow-y: auto;
  }

  .calc-history-list {
    max-height: none;
  }
}