/* === Calculator Enhancements (Mobile-first, RTL-aware) === */
:root{
  --btn-font: clamp(0.9rem, 2.8vw, 1.05rem);
  --btn-pad:  clamp(10px, 2.2vw, 14px);
  --gap:      clamp(6px, 2vw, 10px);
  --radius:   14px;
}

html[dir="rtl"] body{ direction: rtl; }
.calculator, .calc-wrap { max-width: 520px; margin-inline: auto; }

/* Display area: readable and overflow-safe */
.calc-display{
  min-height: 64px;
  padding: 12px 14px;
  border-radius: var(--radius);
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: clamp(1.2rem, 5.5vw, 1.6rem);
}

/* Grid keys with no horizontal scroll on phones */
.calc-keys{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}

@media (min-width: 560px){
  .calc-keys{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.calc-keys button{
  padding: var(--btn-pad);
  border-radius: var(--radius);
  font-size: var(--btn-font);
  line-height: 1.1;
  min-height: 44px; /* touch target */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Wide key helper (e.g., 0 or = if needed) */
.calc-keys .wide { grid-column: span 2; }

/* Scientific panel (collapsible, fits without scroll) */
#scientific-panel{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-block: 10px 0;
}

#scientific-panel button{ 
  padding: calc(var(--btn-pad) - 2px);
  font-size: clamp(0.82rem, 2.3vw, 0.95rem);
  min-height: 40px;
}

/* Toggle row */
.scitoggle-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; margin: 8px 0 6px;
}
.scitoggle-row .switch{
  display:inline-flex; align-items:center; gap:10px;
}

.hide{ display:none !important; }

/* Prevent page scroll due to container overflow */
.calculator, .calc-wrap, .calc-keys, #scientific-panel{ overflow: visible; }

/* Unit tabs removed */
.unit-tabs{ display:flex; gap:8px; }
.unit-tabs [role="tab"]{
  padding: 8px 12px;
  border-radius: 12px;
  min-height: 36px;
}
.unit-tabs [aria-selected="true"]{ outline: 2px solid currentColor; }


/* Responsive container fit */
.calculator, .calc-wrap { width: 100%; padding: 12px; }
@media (min-width: 640px){
  .calculator, .calc-wrap { max-width: 680px; }
}
@media (min-width: 960px){
  .calculator, .calc-wrap { max-width: 820px; }
}

/* Slightly larger buttons on wider screens */
@media (min-width: 960px){
  :root{ --btn-font: clamp(1rem, 1.4vw, 1.25rem); --btn-pad: clamp(12px, 1.6vw, 18px); }
}


/* Mode bar removed */
.modebar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.modebar .tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.modebar .tabs [role="tab"]{ padding:8px 12px; border-radius:12px; min-height:36px; }
.modebar .tabs [aria-selected="true"]{ outline:2px solid currentColor; }

/* Ensure both keypads look identical grids */
#keypad, 
/* Expression/Output sizing */
.display .exp{ opacity: .85; font-size: clamp(0.95rem, 3.5vw, 1.05rem); min-height: 1.4em;}
.display .out{ font-size: clamp(1.3rem, 6vw, 1.8rem); min-height: 1.6em;}

/* Container widths */
.calculator, .calc-wrap { width: 100%; padding: 12px; }
@media (min-width: 640px){ .calculator, .calc-wrap { max-width: 680px; } }
@media (min-width: 960px){ .calculator, .calc-wrap { max-width: 860px; } }