/* PercentConverter shared styles */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg: #F3F6F1;
  --surface: #FFFFFF;
  --border: #E1E8DE;
  --text: #1E2B23;
  --text-muted: #566058;
  --green: #1F7A4D;
  --green-dark: #14532D;
  --green-light: #E7F3EC;
  --lcd-bg: #DCEFE0;
  --lcd-text: #14532D;
}

body{
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--text);
}

h1, h2, h3, .brand{
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* Calculator LCD readout - the site's signature visual element */
.lcd{
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  background: var(--lcd-bg);
  color: var(--lcd-text);
  box-shadow: inset 0 2px 8px rgba(20,83,45,0.18);
  border-radius: 0.75rem;
  letter-spacing: 0.01em;
}

.lcd-label{
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: var(--green-dark);
  opacity: 0.7;
}

.field-input{
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  width: 100%;
  background: #fff;
}
.field-input:focus{
  border-color: var(--green);
}

.tab-btn{
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.tab-btn.active{
  background-color: var(--green);
  color: #fff;
}
.tab-btn:not(.active){
  background-color: var(--green-light);
  color: var(--text);
}
.tab-btn:not(.active):hover{
  background-color: #d5e9dc;
}

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
}

.copy-btn{
  background: var(--green-light);
  color: var(--green-dark);
  transition: background-color .15s ease;
}
.copy-btn:hover{
  background-color: #d5e9dc;
}

details.faq summary{
  cursor: pointer;
  list-style: none;
}
details.faq summary::-webkit-details-marker{ display: none; }
details.faq summary::after{
  content: '+';
  float: right;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--green);
}
details.faq[open] summary::after{
  content: '\2212';
}