/* Local Stylesheet for Fraction Calculator */

/* App View Mode: Lock viewport and center the container */
.app-view-mode,
.app-view-mode body {
  height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-view-mode body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-view-mode main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  max-width: none;
}

/* Display */
.display-area {
  background-color: var(--bg-color);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.65rem 1rem;
  margin-bottom: 1rem;
  text-align: right;
  min-height: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.display-primary {
  font-size: 1.65rem;
  font-weight: 700;
  word-break: break-all;
}
.display-secondary {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Tampa Bay Buccaneers Theme - Scoped strictly to .calc-container */
.calc-container {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  height: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 0.75rem;
  padding: 1rem !important;
  background-color: #34302B !important; /* Deep Pewter */
  color: #ffffff !important;
  border: 1px solid #4a4540 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5) !important;
}

@media (max-width: 480px) {
  .calc-container {
    border-radius: 0 !important;
    border: none !important;
    padding: 0.5rem 0.5rem 0.25rem 0.5rem !important;
  }
}

.calc-container h1 {
  color: #ffffff !important;
}

/* Display Area stays high-contrast off-white */
.calc-container .display-area {
  background-color: #fafafa !important;
  color: #18181b !important;
  border: 1px solid #e4e4e7 !important;
}

.calc-container .display-secondary {
  color: #71717a !important;
}

.calc-container .display-primary {
  color: #18181b !important;
}

/* Inputs and Selects stay high-contrast off-white */
.calc-container input[type="number"],
.calc-container input[type="text"],
.calc-container select {
  background-color: #fafafa !important;
  color: #18181b !important;
  border: 1px solid #d4d4d8 !important;
  height: 3rem !important; /* Force identical height across inputs and dropdowns to prevent layout shift */
  box-sizing: border-box !important;
}

.calc-container input::placeholder {
  color: #a1a1aa !important;
}

.calc-container input:focus,
.calc-container select:focus {
  border-color: #D50A0A !important;
  box-shadow: 0 0 0 3px rgba(213, 10, 10, 0.4) !important;
  background-color: #ffffff !important;
}

/* Interactive Control/Math Buttons: Brilliant Red (#D50A0A) */
.calc-container .btn,
.calc-container .toggle-btn,
.calc-container .operator-btn,
.calc-container .input-inline-toggle {
  background-color: #D50A0A !important;
  color: #ffffff !important;
  border: 1px solid #b00808 !important;
  transition: background-color 0.1s ease, box-shadow 0.1s ease;
  font-weight: 700;
  touch-action: manipulation;
}

/* Inset icon colors / glyphes */
.calc-container .operator-btn {
  color: #ffffff !important;
}

/* Active Operator button highlight */
.calc-container .operator-btn.active {
  background-color: #8B0000 !important;
  border-color: #600000 !important;
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.6) !important;
}

/* Hover state: slightly darken background layers on pointer mouseover */
.calc-container .btn:hover,
.calc-container .toggle-btn:hover,
.calc-container .operator-btn:hover:not(.active),
.calc-container .input-inline-toggle:hover {
  background-color: #B30808 !important;
}

/* Active/Press state: darken significantly and apply crisp internal box-shadow */
.calc-container .btn:active,
.calc-container .toggle-btn:active,
.calc-container .operator-btn:active,
.calc-container .input-inline-toggle:active {
  background-color: #7A0000 !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.7) !important;
  transition: none !important;
}

/* Sizing Stability for Adjusters */
.calc-container #adjusterGroup {
  display: flex !important;
  height: 2.5rem;
  margin-bottom: 1rem;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.calc-container #adjusterGroup.hidden-adjuster {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Font and typography styling in Pewter background */
.calc-container .fraction-slash {
  color: #ffffff !important;
}

/* History Panel Styling */
.history-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #34302B; /* Deep pewter to match */
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.history-overlay.is-open {
  transform: translateY(0);
}

.history-overlay .history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #4a4540;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.history-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
}

.history-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.history-overlay .close-btn {
  background: transparent;
  border: none;
  color: #a1a1aa;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-overlay .close-btn:hover {
  color: #D50A0A;
}

.history-overlay .history-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 4px;
}

/* Custom Scrollbar for history list */
.history-list::-webkit-scrollbar {
  width: 6px;
}
.history-list::-webkit-scrollbar-track {
  background: #34302B;
}
.history-list::-webkit-scrollbar-thumb {
  background: #4a4540;
  border-radius: 3px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: #2b2724; /* Darker accent */
  border-radius: 0.25rem;
  font-size: 0.9rem;
  border: 1px solid #3e3a35;
}

.history-equation {
  font-family: var(--font-system);
  word-break: break-all;
  padding-right: 0.5rem;
  cursor: pointer;
  flex: 1;
  transition: color 0.15s ease;
}
.history-equation:hover {
  color: #D50A0A;
}

.history-copy-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  color: #a1a1aa !important;
  padding: 0.25rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.history-copy-btn:hover {
  color: #D50A0A !important; /* Buccaneers red hover */
}

.history-copy-btn svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.backspace-icon {
  width: 1.3rem;
  height: 1.3rem;
  display: block;
}

/* Keypad Overhaul */

/* consolidated calc-container */

.toolbar-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}

.toolbar-container .toggle-btn {
  flex: 1;
  min-width: 0 !important;
  text-align: center;
  padding: 0.5rem 0.25rem !important;
  font-size: 0.85rem !important;
}

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.5rem;
  width: 100%;
}

.keypad-btn {
  background-color: #D50A0A !important;
  color: #ffffff !important;
  border: 1px solid #b00808 !important;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.85rem 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  font-family: inherit;
  transition: background-color 0.1s ease, box-shadow 0.1s ease, transform 0.05s ease;
  min-width: 0 !important;
  width: 100% !important;
  height: 3.15rem !important;
  box-sizing: border-box !important;
  touch-action: manipulation;
}

#sub32Btn, #add32Btn {
  font-size: 0.85rem !important;
}

.keypad-btn:hover {
  background-color: #B30808 !important;
}

/* Active pressed state: tactile inset shadows */
.keypad-btn:active {
  background-color: #7A0000 !important;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.7) !important;
  transform: scale(0.97);
  transition: none !important;
}

/* Specific operator / functional key variations */
.keypad-btn.op-btn {
  background-color: #D50A0A !important;
}

.keypad-btn.control-btn {
  background-color: #4a4540 !important;
  border-color: #3e3a35 !important;
}
.keypad-btn.control-btn:hover {
  background-color: #3e3a35 !important;
}
.keypad-btn.control-btn:active {
  background-color: #2b2724 !important;
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.8) !important;
}

/* Default spans for equal submit button: 2 columns in bottom right */
.submit-btn {
  grid-column: span 2 !important;
  background-color: #D50A0A !important;
}

/* 32nds visibility controls */
#frac32Btn {
  display: none;
}

.keypad-grid.has-32nd #frac32Btn {
  display: flex;
}

/* When 32nds is visible, `=` spans 1 column to make room for `/32` in column 5 */
.keypad-grid.has-32nd .submit-btn {
  grid-column: span 1 !important;
}

/* Screen reader only utility (accessibly hidden) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* App Header styling inside calc-container */
.app-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding-bottom: 0.4rem !important;
  border-bottom: 1px solid #4a4540 !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
}

.app-logo {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff !important;
  text-decoration: none;
}

.app-logo span {
  color: #D50A0A;
}

.history-toggle-btn {
  background-color: #4a4540 !important;
  color: #ffffff !important;
  border: 1px solid #3e3a35 !important;
  border-radius: 0.5rem;
  font-size: 0.85rem !important;
  font-weight: 700;
  padding: 0.4rem 0.8rem !important;
  cursor: pointer;
  transition: background-color 0.1s ease, box-shadow 0.1s ease, transform 0.05s ease;
}

.history-toggle-btn:hover {
  background-color: #3e3a35 !important;
}

.history-toggle-btn:active {
  background-color: #2b2724 !important;
  transform: scale(0.97);
}

/* Sticky Ad Placeholder */
.ad-placeholder {
  min-height: 50px;
  height: 50px;
  width: 100%;
  background-color: #2b2724;
  border: 1px dashed #4a4540;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto !important; /* Anchor to the absolute bottom of the container */
  box-sizing: border-box;
}

.ad-text {
  font-size: 0.75rem;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Desktop Scaling for App View Mode */
@media (min-width: 768px) {
  html.app-view-mode {
    font-size: 18px; /* Standard browser default is 16px, this scales elements by 12.5% */
  }
}

@media (min-width: 1024px) {
  html.app-view-mode {
    font-size: 20px; /* Scales elements by 25% */
  }
}

/* --- Tape Measure Viewport Feature --- */
.tape-viewport-row {
  position: relative;
  width: 100%;
  height: 65px; /* updated fixed active height */
  flex-shrink: 0 !important; /* prevent flexbox squeezing */
  background-color: #fcd34d; /* tape-measure gold */
  color: #18181b; /* dark text for contrast on yellow */
  border: 2px solid #18181b;
  border-radius: 0.375rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  user-select: none;
  transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin 0.2s ease, border-width 0.2s ease;
  opacity: 1;
  --inch-width: 220px; /* Zoom narrow (default): shows ~2 inches span */
}

.tape-viewport-row.zoom-wide {
  --inch-width: 125px; /* Zoom wide (contextual): shows ~3.5 inches span */
}

.tape-viewport-row.is-closed {
  height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
}

/* Tape Crosshair Needle - Solid, bottom-up plumb pointer */
.tape-crosshair {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px; /* slightly thicker hair-thin razor line for visual boldness */
  height: 100%;
  background-color: #991b1b; /* high-visibility crisp dark red */
  z-index: 10;
}

.tape-crosshair::before {
  content: '';
  position: absolute;
  bottom: 0; /* absolute bottom edge of the viewport row */
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 16px solid #991b1b; /* bold upward-pointing red triangle */
}

/* Tape Measure Strip */
.tape-measure-strip {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 10000px; /* wide container to hold ticks */
  transform: translateX(calc(-1 * var(--calculated-offset, 0px)));
  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.tape-viewport-row.is-dragging .tape-measure-strip {
  transition: none !important;
}

/* Tape ticks */
.tape-tick {
  position: absolute;
  top: 0;
  width: 1px;
  background-color: #18181b;
  transform: translateX(-50%);
}

/* Tick heights - scaled down for 65px container */
.tick-inch {
  height: 28px;
  width: 2px;
  background-color: #000000;
}

.tick-half {
  height: 20px;
  width: 1.5px;
}

.tick-quarter {
  height: 15px;
}

.tick-eighth {
  height: 10px;
}

.tick-sixteenth {
  height: 7px;
}

.tick-thirtysecond {
  height: 4px;
  background-color: #52525b; /* slightly lighter for 32nds */
}

/* Hide 32nd ticks unless show-32nds class is active */
.tape-viewport-row:not(.show-32nds) .tick-thirtysecond {
  display: none;
}

/* Inch text labels - rendered visually below the ticks */
.tape-label {
  position: absolute;
  top: 32px; /* placed below the 28px tall inch tick */
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-system);
  font-weight: 800;
  font-size: 1.05rem;
  color: #000000;
  text-align: center;
  line-height: 1.1;
}

.tape-label-sub {
  font-size: 0.6rem;
  display: block;
  font-weight: 500;
  color: #374151;
  margin-top: -3px;
}

/* Settings Overlay Panel Styling */
.settings-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #34302B; /* Deep pewter */
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.settings-overlay.is-open {
  transform: translateY(0);
}

.settings-overlay .settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #4a4540;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.settings-overlay .close-btn {
  background: transparent;
  border: none;
  color: #a1a1aa;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-overlay .close-btn:hover {
  color: #D50A0A;
}

.settings-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: #2b2724;
  border-radius: 0.5rem;
  border: 1px solid #3e3a35;
}

.settings-row-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffffff;
}

.settings-row .toggle-btn {
  min-width: 6.5rem !important;
  text-align: center;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.8rem !important;
}

.settings-row .toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #4a4540 !important;
  border-color: #3e3a35 !important;
}

/* Header Controls & Toggle Buttons */
.header-controls {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.settings-toggle-btn {
  background-color: #4a4540 !important;
  color: #ffffff !important;
  border: 1px solid #3e3a35 !important;
  border-radius: 0.5rem;
  padding: 0.4rem 0.5rem !important;
  cursor: pointer;
  transition: background-color 0.1s ease, transform 0.05s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.settings-toggle-btn:hover {
  background-color: #3e3a35 !important;
}

.settings-toggle-btn:active {
  background-color: #2b2724 !important;
  transform: scale(0.97);
}

.settings-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

/* Mobile real estate compression when Tape viewport is active */
@media (max-width: 480px) {
  .calc-container.tape-enabled .display-area {
    padding: 0.45rem 0.85rem !important;
    min-height: 2.85rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.35rem !important;
  }

  .calc-container.tape-enabled .display-primary {
    font-size: 1.35rem !important;
  }

  .calc-container.tape-enabled .display-secondary {
    font-size: 0.75rem !important;
  }

  .calc-container.tape-enabled .keypad-btn {
    height: 2.8rem !important;
    font-size: 1.15rem !important;
    padding: 0.65rem 0.2rem !important;
  }
}