/* bullet-proof hide for [hidden] */
[hidden]{ display:none !important; }

:root{
  --brand:#22703A;
  --brand-600:#1c5e31;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --bg:#ffffff;
  --card:#f8fafc;
  --focus: 0 0 0 3px rgba(34,112,58,0.25);
}

.itersicalc{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--ink);
  max-width: 860px;
  margin: 0 auto;
  padding: 1.25rem;
}

.itersicalc-title{
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  margin: 0 0 .25rem 0;
  font-weight: 700;
}
.itersicalc-subtitle{
  color: var(--muted);
  margin: 0 0 1rem 0;
}

.itersicalc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .9rem .9rem;
}
.span-2-md{ grid-column: span 2; }

.itersicalc-field{
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .8rem .9rem;
}
.itersicalc-field label{
  font-weight: 600; margin-bottom: .35rem;
}
.itersicalc-field input,
.itersicalc-field select{
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .55rem .65rem;
  font-size: .975rem;
  background: #fff;
  outline: none;
}
.itersicalc-field input:focus,
.itersicalc-field select:focus{ box-shadow: var(--focus); border-color: var(--brand); }
.itersicalc-field .hint{
  color: var(--muted);
  font-size: .8rem;
  margin-top: .35rem;
}

.group-title{
  margin: 1.2rem 0 .5rem 0;
  font-weight: 700;
  color: var(--brand);
}

.itersicalc-height-group{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem .5rem;
}
.itersicalc-height-group .hint{ grid-column: span 2; }

.itersicalc-three{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem;
}

.itersicalc-actions{
  display: flex;
  gap: .6rem;
  margin: 1rem 0;
}
.btn-primary{
  background: var(--brand); color: #fff; border: none;
  padding: .7rem 1rem; border-radius: 10px; font-weight: 700; cursor: pointer;
}
.btn-primary:hover{ background: var(--brand-600); }
.btn-ghost{
  background: transparent; color: var(--brand); border: 1px solid var(--brand);
  padding: .7rem 1rem; border-radius: 10px; cursor: pointer; font-weight: 600;
}
.btn-ghost:hover{ background: rgba(34,112,58,0.06); }

.itersicalc-errors{
  margin: .8rem 0; padding: .75rem .9rem;
  border: 1px solid #fecaca; border-radius: 10px; background: #fff1f2;
  color: #991b1b; font-weight: 600;
}

/* Results */
.itersicalc-results{ margin-top: 1rem; }
.results-cards{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem;
}
.card{
  border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: .9rem;
}
.card-kicker{ color: var(--muted); font-size: .8rem; }
.card-value{ font-size: 1.4rem; font-weight: 800; margin-top: .25rem; }
.card-note{ color: var(--muted); font-size: .8rem; margin-top: .2rem; }

.macro-table-wrap{ margin-top: .9rem; }
.macro-table{ width: 100%; border-collapse: collapse; }
.macro-table th, .macro-table td{
  text-align: left; border-bottom: 1px solid var(--line); padding: .6rem .4rem;
}
.macro-note{ color: var(--muted); font-size: .85rem; margin-top: .6rem; }

.itersicalc-guidance{
  margin-top: .6rem; border: 1px solid var(--line); border-radius: 12px; padding: .8rem;
}
.itersicalc-guidance.status-safe   { border-color: #bbf7d0; background: #f0fdf4; color: #14532d; }
.itersicalc-guidance.status-caution{ border-color: #fde68a; background: #fffbeb; color: #7c2d12; }
.itersicalc-guidance.status-warning{ border-color: #fecaca; background: #fff1f2; color: #7f1d1d; }

@media (max-width: 720px){
  .itersicalc-grid{ grid-template-columns: 1fr; }
  .results-cards{ grid-template-columns: 1fr; }
  .span-2-md{ grid-column: auto; }
}