/* =========================================================================
   app.css — fordubetaler.no
   Sidespesifikke stiler bygd på de delte Thorsvoll Media-tokenene.
   ========================================================================= */

.tool-main {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--tm-topbar-h) + 2.5rem) 1.25rem 5rem;
}

/* -- Hero ------------------------------------------------------------------ */
.tool-hero {
  text-align: center;
  margin-bottom: 1.75rem;
}
.tool-hero .eyebrow {
  font-family: var(--tm-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--tm-green);
  text-transform: uppercase;
}
.tool-hero h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.5rem;
  color: var(--tm-green);
}
.tool-hero p {
  color: var(--tm-muted);
  max-width: 52ch;
  margin: 0 auto;
}

/* -- Skjema ---------------------------------------------------------------- */
.check {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-lg);
  box-shadow: var(--tm-shadow);
  padding: 1.4rem;
}
.check__label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 0.55rem;
}
.check__label--mt { margin-top: 1.4rem; }
.check__sub {
  color: var(--tm-muted);
  font-size: 0.85rem;
  font-weight: 400;
  margin-left: 0.35rem;
}
.check__sub--block {
  display: block;
  margin: 0 0 0.55rem;
  line-height: 1.4;
}

/* Betalingstype-chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.chip {
  font: inherit;
  font-size: 0.86rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1.5px solid var(--tm-border);
  background: var(--tm-bg);
  color: var(--tm-text);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.chip:hover { border-color: var(--tm-green); }
.chip--on {
  background: var(--tm-green);
  border-color: var(--tm-green);
  color: #fff;
}
:root[data-theme="dark"] .chip--on { color: #1a1916; }

/* Fritekst */
.check__textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 0.85rem 0.95rem;
  font-family: var(--tm-font-sans);
  font-size: 1rem;
  color: var(--tm-text);
  background: var(--tm-bg);
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius);
}
.check__textarea:focus {
  outline: none;
  border-color: var(--tm-green);
  box-shadow: 0 0 0 3px var(--tm-thread-glow);
}

/* Valgfrie felter */
.check__optional {
  margin-top: 1.1rem;
}
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
  padding: 0.3rem 0 1rem;
}
.fields label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--tm-muted);
}
.fields input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
  color: var(--tm-text);
  background: var(--tm-surface);
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
}
.fields input:focus {
  outline: none;
  border-color: var(--tm-green);
  box-shadow: 0 0 0 3px var(--tm-thread-glow);
}

.check__actions {
  margin-top: 1.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.check__btn {
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: var(--tm-radius);
  background: var(--tm-green);
  color: #fff;
  cursor: pointer;
}
:root[data-theme="dark"] .check__btn { color: #1a1916; }
.check__btn:disabled { opacity: 0.6; cursor: default; }
.check__hint { color: var(--tm-muted); font-size: 0.82rem; }

/* «Vi fant»-chips */
.found {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1.1rem 0 0;
}
.found-chip__lead { font-size: 0.85rem; color: var(--tm-muted); margin-right: 0.2rem; }
.found-chip {
  font-family: var(--tm-font-mono);
  font-size: 0.78rem;
  background: var(--tm-surface-2);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  padding: 0.18rem 0.5rem;
}
.found-chip__k { color: var(--tm-green); margin-right: 0.25rem; }
.found-chip__lead--text { color: var(--tm-muted); margin-left: 0.35rem; }
.found-chip__lead--text::before { content: ""; }

/* Primær-velger (flere mulige treff) */
.picker {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--tm-surface-2);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
}
.picker__intro { margin: 0 0 0.7rem; font-size: 0.86rem; color: var(--tm-muted); }
.picker__group { border: none; margin: 0 0 0.7rem; padding: 0; }
.picker__group:last-child { margin-bottom: 0; }
.picker__group legend { font-size: 0.86rem; font-weight: 600; padding: 0 0 0.3rem; }
.picker__opt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  padding: 0.15rem 0;
  cursor: pointer;
}
.picker__opt input { accent-color: var(--tm-green); }

/* Funn-oversikt i resultatet */
.overview {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1rem;
  background: var(--tm-surface-2);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
}
.overview__line { margin: 0.25rem 0; font-size: 0.9rem; }
.overview__other { margin: 0.1rem 0 0.6rem; font-size: 0.82rem; color: var(--tm-muted); }

.skipped {
  margin: 0 0 1.2rem;
  padding: 0.8rem 1rem;
  background: var(--tm-surface-2);
  border: 1px dashed var(--tm-border);
  border-radius: var(--tm-radius-sm);
}
.skipped__line { margin: 0.2rem 0; font-size: 0.85rem; color: var(--tm-muted); }

/* -- Resultat -------------------------------------------------------------- */
#result { margin-top: 2rem; }

.summary {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-left: 4px solid var(--tm-green);
  border-radius: var(--tm-radius);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.5rem;
}
.summary h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.summary__line { margin: 0; color: var(--tm-text); }
.summary__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--tm-muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

.group { margin-bottom: 1.6rem; }
.group__title {
  font-size: 1.05rem;
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--tm-border);
}

/* Funn-kort */
.finding {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-left: 3px solid var(--tm-border);
  border-radius: var(--tm-radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.7rem;
}
.finding--ok       { border-left-color: var(--tm-green); }
.finding--info     { border-left-color: #5b7fa6; }
.finding--warning  { border-left-color: #c08a3e; }
.finding--critical { border-left-color: #b5503f; }
.finding--unknown  { border-left-color: var(--tm-muted); }

.finding__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.finding__title { font-weight: 650; font-size: 0.97rem; }
.finding__badge {
  font-family: var(--tm-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.badge--ok       { background: var(--tm-green); }
.badge--info     { background: #5b7fa6; }
.badge--warning  { background: #c08a3e; }
.badge--critical { background: #b5503f; }
.badge--unknown  { background: var(--tm-muted); }
:root[data-theme="dark"] .badge--ok { color: #1a1916; }

.finding__msg { margin: 0 0 0.4rem; font-size: 0.92rem; line-height: 1.5; }
.finding__evidence, .finding__note, .finding__src {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--tm-muted);
}
.finding__evidence { font-family: var(--tm-font-mono); }
.finding__evidence-k, .finding__note-k { color: var(--tm-text); font-weight: 600; }
.finding__src a { color: var(--tm-link); }

.loading-note {
  font-size: 0.9rem;
  color: var(--tm-muted);
  text-align: center;
  padding: 0.8rem;
}

/* Kildekatalog */
.catalog { margin-top: 2rem; }
.catalog__sec { margin-bottom: 1.4rem; }
.catalog__sec h3 { font-size: 0.98rem; margin: 0 0 0.4rem; }
.catalog__note { font-size: 0.82rem; color: var(--tm-muted); margin: 0 0 0.5rem; }
.catalog__lead { font-size: 0.85rem; color: var(--tm-muted); margin: 0 0 0.5rem; }
.catalog__list { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.6; }
.catalog__list--muted { color: var(--tm-muted); }
.catalog__list a { color: var(--tm-link); }
.catalog__hint { color: var(--tm-muted); }

/* Forbehold */
.disclaimer {
  margin-top: 2rem;
  background: var(--tm-surface-2);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  padding: 1.1rem 1.2rem;
}
.disclaimer h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.disclaimer p { font-size: 0.88rem; margin: 0 0 0.6rem; }
.disclaimer ul { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--tm-muted); line-height: 1.6; }

.result-error {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-left: 3px solid #c08a3e;
  border-radius: var(--tm-radius);
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
}

/* Info-seksjon nederst */
.tool-info {
  max-width: 760px;
  margin: 3rem auto 0;
  padding: 0 1.25rem;
}
.tool-info h2 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; }
.tool-info p { color: var(--tm-muted); line-height: 1.6; }
.tool-info ul { color: var(--tm-muted); line-height: 1.7; padding-left: 1.2rem; }
.tool-info__more {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--tm-green);
  font-weight: 600;
  text-decoration: none;
}
.tool-info__more:hover { text-decoration: underline; }

/* «Flere opplysninger» — alltid synlig (ikke skjult bak pil) */
.check__more { margin-top: 1.1rem; }
.check__more-label {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--tm-text);
}

/* -- Kilder-side ----------------------------------------------------------- */
.kilder {
  max-width: 860px;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
}
.kilder__intro {
  font-family: var(--tm-font-mono);
  font-size: 0.85rem;
  color: var(--tm-muted);
  margin-bottom: 1.8rem;
}
.kilder__group { margin-bottom: 2.4rem; }
.kilder__group h2 { font-size: 1.2rem; margin: 0 0 0.3rem; }
.kilder__lead { color: var(--tm-muted); line-height: 1.6; margin: 0 0 1rem; font-size: 0.92rem; }
.kilder__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
}
.kilder__card {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  padding: 0.9rem 1rem;
}
.kilder__card h3 { font-size: 0.95rem; margin: 0 0 0.45rem; }
.kilder__can,
.kilder__cannot {
  font-size: 0.83rem;
  line-height: 1.5;
  margin: 0.2rem 0;
  color: var(--tm-muted);
}
.kilder__can span { color: var(--tm-green); font-weight: 600; }
.kilder__cannot span { color: var(--tm-text); font-weight: 600; }
.kilder__link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--tm-green);
  text-decoration: none;
}
.kilder__link:hover { text-decoration: underline; }
.kilder__group--plain .kilder__never {
  color: var(--tm-muted);
  line-height: 1.7;
  padding-left: 1.2rem;
  margin: 0;
}
.kilder__group--plain .kilder__never strong { color: var(--tm-text); }

@media (max-width: 560px) {
  .check { padding: 1.1rem; }
  .check__actions { gap: 0.7rem; }
  .check__btn { width: 100%; }
}