/*
 * navigator-dnn.css — Agent module styling
 * Requires agents-shared.css
 * /DesktopModules/TjepsNavigator/CSS/navigator-dnn.css
 */

html,body{overflow-x:hidden}

main{display:block;padding:3rem 1.5rem}

/* ── Eyebrow / titels ── */
.eyebrow{
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.6rem;font-weight:500;
}

h1{
  font-family:inherit;font-size:34px;font-weight:500;
  line-height:1.15;margin-bottom:0.75rem;letter-spacing:-0.025em;
  color:var(--text);
}

.subtitle{
  font-size:16px;color:var(--text-muted);
  line-height:1.7;margin-bottom:2rem;
}

/* ── Textarea ── */
.input-wrap{position:relative}

textarea{
  width:100%;padding:1rem 1.125rem 2.5rem;
  font-size:15px;font-family:inherit;line-height:1.65;
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--r-lg);color:var(--text);
  resize:vertical;outline:none;transition:border-color 0.2s;min-height:130px;
}
textarea::placeholder{color:var(--text-light)}
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.input-hint{
  position:absolute;bottom:10px;right:14px;
  font-size:11px;color:var(--text-muted);pointer-events:none;
}

.hp{display:none!important}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 22px;font-size:14px;font-weight:500;
  border-radius:var(--r-md);cursor:pointer;transition:all 0.15s;
  text-decoration:none;border:none;line-height:1;font-family:inherit;
}
.btn-primary{background:var(--accent)!important;color:#fff!important}
.btn-primary:hover{background:var(--accent-h);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--text-muted);color:var(--text)}

.btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}

/* ── Answer blok ── */
.answer-block{
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.5rem;margin-bottom:1.5rem;
}
.answer-echo{border-left:2px solid var(--border);padding-left:14px;margin-bottom:1.25rem}
.answer-echo-label{font-size:12px;color:var(--text-muted);margin-bottom:3px;letter-spacing:0.04em}
.answer-echo-text{font-size:14px;color:var(--text-muted);font-style:italic;line-height:1.6}
.answer-text{font-size:15px;color:var(--text);line-height:1.75}

/* ── Probleemnavigator cards (legacy) ── */
.card{
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.125rem 1.25rem;
}
.card-label{
  font-size:11px;font-weight:500;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;
}
.card-text{font-size:15px;color:var(--text);line-height:1.7}
.card-accent{background:var(--bg-soft);border:1px solid var(--accent-border)}
.card-accent .card-label{color:var(--accent-text)}
.card-accent .card-text{font-style:italic}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.results-stack{display:grid;gap:10px;margin-bottom:1.5rem}
.echo{border-left:2px solid var(--border);padding-left:14px;margin-bottom:1.5rem}
.echo-label{font-size:12px;color:var(--text-muted);margin-bottom:3px;letter-spacing:0.04em}
.echo-text{font-size:14px;color:var(--text-muted);font-style:italic;line-height:1.6}

/* ── Loading ── */
#step-loading{text-align:center;padding:5rem 0}

/* ── Error ── */
#step-error{
  background:rgba(220,53,69,0.08);border:1px solid rgba(220,53,69,0.2);
  border-radius:var(--r-lg);padding:1.125rem 1.25rem;
}
.error-text{font-size:14px;color:#c53030;margin-bottom:12px;line-height:1.6}

/* ── Responsive ── */
@media(max-width:520px){
  h1{font-size:26px}
  .card-grid{grid-template-columns:1fr}
  main{padding:2rem 1.25rem}
  .input-hint{display:none}
}