:root {
  --accent: #d9480f;
  --bg: #fbf9f7;
  --card: #ffffff;
  --border: #e6e0da;
  --text: #2b2b2b;
  --green: #2b8a3e;
  --red: #c92a2a;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

.page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

h1 {
  margin-bottom: 0.2rem;
}
.subtitle {
  color: #6b6b6b;
  margin-top: 0;
  margin-bottom: 2rem;
}

.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 1rem;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  padding: 1rem 1.2rem;
  min-width: min(400px, 100%);
}

legend {
  font-weight: 600;
  padding: 0 0.4rem;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  color: #444;
  margin-bottom: 0.7rem;
  gap: 0.3rem;
}

label.hidden {
  display: none;
}

.label-text {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

input,
select {
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  width: 100%;
}

input[readonly] {
  background: #f2efec;
  color: #6b6b6b;
}

.input-with-unit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.input-with-unit input {
  flex: 1;
}

.unit {
  font-size: 0.85rem;
  color: #6b6b6b;
  white-space: nowrap;
}

/* --- Tooltips --- */

.tooltip-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #d9d2c9;
  color: #fff;
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: #2b2b2b;
  color: #fff;
  text-align: left;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  z-index: 10;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.tooltip-icon:hover .tooltip-text,
.tooltip-icon:focus .tooltip-text {
  visibility: visible;
  opacity: 1;
}

button {
  grid-column: 1 / -1;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.5rem;
}

button:hover {
  opacity: 0.92;
}

#toggle-table {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  margin: 1rem 0;
  grid-column: unset;
}

.result {
  margin-top: 2.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  text-align: center;
}

.fire-number {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0.3rem 0;
}

.ratio {
  color: #6b6b6b;
  font-size: 0.9rem;
}

/* --- Results table: horizontal scroll on narrow viewports, sticky header ---
   Note: a wrapper with overflow-x:auto breaks position:sticky relative to the
   page in every browser (any non-visible overflow on an ancestor makes that
   ancestor the sticky containing block, not the viewport). So instead of
   sticking to the page, the header sticks to the top of this scrollable box,
   which itself has a bounded height and scrolls internally (both axes). */

.table-scroll {
  overflow: auto;
  max-height: 70vh;
  width: 100%;
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}

th,
td {
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.5rem;
  text-align: right;
}

td {
  white-space: nowrap;
}
td:first-child {
  text-align: left;
}

thead th {
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}

.value-positive {
  color: var(--green);
  font-weight: 600;
}
.value-negative {
  color: var(--red);
  font-weight: 600;
}

.hidden {
  display: none;
}

.error {
  color: #b02a37;
  background: #fbe9ea;
  border: 1px solid #f1c1c5;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-top: 1.5rem;
}