.tool-page{min-height:60vh}
.tool-width{max-width:820px}
.tool-intro{padding:38px 0 26px}
.tool-intro h1{margin-bottom:10px}
.tool-intro p{max-width:720px;line-height:1.6}
.calculator-section{padding:8px 0 28px}
.calculator-card{padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.input-grid.one{grid-template-columns:1fr}
.input-grid label{display:block;margin-bottom:7px;color:var(--muted);font-size:13px;font-weight:800}
.input-grid input,.input-grid select,.input-grid textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
.input-grid textarea{min-height:90px;resize:vertical}
.help-text{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.calculate-button{margin-top:20px}
.error-message{margin-top:14px}
.solution-section{padding:8px 0 54px}
.solution-heading{margin-bottom:20px}
.solution-card{padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:12px}
.solution-card h3{margin:0 0 10px}
.solution-card p{line-height:1.55}
.math-line{font-size:20px;font-weight:900;text-align:left;overflow-wrap:anywhere}
.visual-box{position:sticky;top:24px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.visual-box h3{margin-top:0}
.numberline{position:relative;height:90px;margin:24px 8px 8px}
.numberline-line{position:absolute;left:0;right:0;top:42px;height:4px;background:var(--text);border-radius:999px}
.numberline-zero{position:absolute;top:30px;width:2px;height:28px;background:var(--muted)}
.numberline-point{position:absolute;top:34px;width:16px;height:16px;border-radius:50%;background:var(--accent);transform:translateX(-50%)}
.numberline-label{position:absolute;top:58px;transform:translateX(-50%);font-size:12px;font-weight:800}
.bar-list{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:minmax(70px,auto) 1fr auto;gap:8px;align-items:center}
.bar-track{height:20px;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft);overflow:hidden}
.bar-fill{height:100%;background:var(--accent)}
.tag-row{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);font-weight:800}
.code-box{padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.55}
@media(max-width:900px){.support-solution-layout{grid-template-columns:1fr}.visual-box{position:static}}
@media(max-width:620px){.input-grid{grid-template-columns:1fr}.calculator-card{padding:16px}.math-line{font-size:18px}}

.simple-data-table {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.simple-data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, .45fr);
}

.simple-data-row > span {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.simple-data-row > span + span {
  border-left: 1px solid var(--line);
  font-weight: 800;
}

.simple-data-row:last-child > span {
  border-bottom: 0;
}

.simple-data-head {
  background: var(--surface-soft);
  font-weight: 900;
}


/* Tallakse og delestreker for horisontale stolpediagram */
.bar-track{
  position:relative;
}
.bar-fill{
  position:relative;
  z-index:1;
}
.bar-grid-lines{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.bar-grid-line{
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--line);
  transform:translateX(-.5px);
}
.bar-scale-row{
  display:grid;
  grid-template-columns:minmax(70px,auto) 1fr auto;
  gap:8px;
  align-items:start;
  margin-top:4px;
  min-height:34px;
}
.bar-scale-spacer{
  min-width:70px;
}
.bar-value-spacer{
  width:1ch;
}
.bar-axis{
  position:relative;
  height:32px;
}
.bar-axis-line{
  position:absolute;
  left:0;
  right:0;
  top:5px;
  height:2px;
  background:var(--muted);
}
.bar-axis-tick{
  position:absolute;
  top:0;
  transform:translateX(-50%);
}
.bar-axis-tick:first-of-type{
  transform:none;
}
.bar-axis-tick:last-of-type{
  transform:translateX(-100%);
}
.bar-axis-mark{
  display:block;
  width:1px;
  height:11px;
  margin:0 auto;
  background:var(--muted);
}
.bar-axis-label{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  text-align:center;
}

@media(max-width:620px){
  .bar-scale-row{
    grid-template-columns:minmax(54px,auto) 1fr auto;
  }
  .bar-scale-spacer{
    min-width:54px;
  }
}

/* Hold stolper og tallakse i samme kolonner */
.bar-row,
.bar-scale-row{
  grid-template-columns:110px minmax(0,1fr) 28px;
}
.bar-scale-spacer{
  min-width:0;
}
.bar-value-spacer{
  width:auto;
}
.bar-axis-tick:nth-of-type(2){
  transform:none;
}
@media(max-width:620px){
  .bar-row,
  .bar-scale-row{
    grid-template-columns:78px minmax(0,1fr) 24px;
  }
}

/* Tallinje med delestreker og tellbare verdier */
.numberline{
  height:112px;
}
.numberline-ticks{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.numberline-tick{
  position:absolute;
  top:34px;
  width:1px;
  height:17px;
  background:var(--muted);
  transform:translateX(-.5px);
}
.numberline-tick-zero{
  width:2px;
  height:23px;
  top:31px;
  background:var(--text);
}
.numberline-tick-label{
  position:absolute;
  top:23px;
  left:50%;
  transform:translateX(-50%);
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.numberline-start-label,
.numberline-answer-label{
  top:73px;
}
.numberline-start-point,
.numberline-answer-point{
  z-index:3;
}