/* T23 – Simulador (Etapa 4E: estilo leve, escopado e responsivo)
   Observações:
   - Todo escopo dentro de .t23-sim-min para evitar colisões.
   - Usa CSS vars locais para facilitar theming.
*/

.t23-sim-min {
  --t23-bg: #fff;
  --t23-fg: #1f2328;
  --t23-muted: #667085;
  --t23-border: #e5e7eb;
  --t23-accent: #2563eb;
  --t23-accent-contrast: #fff;
  --t23-soft: #f8fafc;

  background: var(--t23-bg);
  color: var(--t23-fg);
  border: 1px solid var(--t23-border);
  border-radius: 12px;
  padding: 16px;
  max-width: 880px;
  margin: 16px auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  line-height: 1.45;
}

.t23-sim-min header {
  margin-bottom: 8px;
}
.t23-sim-min header h2 {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
  font-weight: 650;
}
.t23-sim-min header p {
  margin: 0;
  color: var(--t23-muted);
}

/* Formulário */
.t23-sim-min form fieldset {
  border: 1px dashed var(--t23-border);
  border-radius: 10px;
  padding: 12px;
  background: var(--t23-soft);
  margin: 8px 0 14px 0;
}
.t23-sim-min form legend {
  font-size: .95rem;
  color: var(--t23-muted);
  padding: 0 6px;
}
.t23-sim-min form label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.t23-sim-min input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
  border: 1px solid var(--t23-border);
  background: #fff;
  color: var(--t23-fg);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  width: 140px;
}
.t23-sim-min input[type="number"]:focus {
  outline: 2px solid color-mix(in srgb, var(--t23-accent) 30%, transparent);
  border-color: var(--t23-accent);
}
.t23-sim-min button[type="submit"] {
  margin-left: 10px;
  border: 1px solid var(--t23-accent);
  background: var(--t23-accent);
  color: var(--t23-accent-contrast);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .95rem;
  cursor: pointer;
}
.t23-sim-min button[type="submit"]:hover {
  filter: brightness(0.96);
}
.t23-sim-min button[type="submit"]:focus {
  outline: 2px solid color-mix(in srgb, var(--t23-accent) 35%, transparent);
}

/* Resultados */
.t23-sim-min .js-sim-results {
  border: 1px solid var(--t23-border);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}
.t23-sim-min .js-sim-results h3 {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
  color: var(--t23-muted);
  font-weight: 600;
}

/* Lista de definições em grid */
.t23-sim-min dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: center;
  margin: 0;
}
.t23-sim-min dt {
  margin: 0;
  color: var(--t23-muted);
}
.t23-sim-min dd {
  margin: 0;
  font-weight: 600;
}

/* Aviso (quando SM = 0) */
.t23-sim-min .t23-warn {
  background: #fff3cd;
  border: 1px solid #ffe69c;
  color: #664d03;
  padding: 10px;
  border-radius: 8px;
  margin-top: 10px;
}

/* Responsivo */
@media (max-width: 640px) {
  .t23-sim-min { padding: 14px; }
  .t23-sim-min dl { grid-template-columns: 1fr; }
  .t23-sim-min input[type="number"] { width: 120px; }
}

/* Notas (Etapa 5C) */
.t23-sim-min [aria-labelledby$="-notes-title"]{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--t23-border);
  border-radius:10px;
  background: var(--t23-soft);
}
.t23-sim-min [id$="-notes-title"]{
  margin:0 0 8px 0;
  font-size:1.05rem;
  color: var(--t23-muted);
  font-weight:600;
}
.t23-sim-min [aria-labelledby$="-notes-title"] ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
}
.t23-sim-min [aria-labelledby$="-notes-title"] li{
  color: var(--t23-fg);
  line-height:1.4;
}
@media (max-width:640px){
  .t23-sim-min [aria-labelledby$="-notes-title"]{ padding:10px; }
}

/* FAQ (Etapa 6C) */
.t23-sim-min [aria-labelledby$="-faq-title"]{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--t23-border);
  border-radius:10px;
  background: var(--t23-soft);
}
.t23-sim-min [id$="-faq-title"]{
  margin:0 0 8px 0;
  font-size:1.05rem;
  color: var(--t23-muted);
  font-weight:600;
}

/* Container do FAQ */
.t23-sim-min .t23-faq{
  display:grid;
  gap:8px;
}

/* Cada item */
.t23-sim-min .t23-faq details{
  border:1px solid var(--t23-border);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}

/* Cabeçalho do item */
.t23-sim-min .t23-faq summary{
  list-style:none;           /* remove marker default */
  cursor:pointer;
  margin:0;
  padding:12px 14px;
  font-weight:600;
  color: var(--t23-fg);
  display:flex;
  align-items:center;
  gap:10px;
}

/* Ícone de seta */
.t23-sim-min .t23-faq summary::before{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid var(--t23-muted);
  border-bottom:2px solid var(--t23-muted);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}

/* Estado aberto: seta vira para baixo */
.t23-sim-min .t23-faq details[open] > summary::before{
  transform: rotate(45deg);
}

/* Hover/focus */
.t23-sim-min .t23-faq summary:hover{
  background: color-mix(in srgb, var(--t23-soft) 70%, transparent);
}
.t23-sim-min .t23-faq summary:focus{
  outline:none;
}
.t23-sim-min .t23-faq summary:focus-visible{
  outline:2px solid color-mix(in srgb, var(--t23-accent) 35%, transparent);
  outline-offset:2px;
  border-radius:8px;
}

/* Conteúdo da resposta */
.t23-sim-min .t23-faq .t23-faq-a{
  padding:10px 14px 12px 34px;
  color: var(--t23-fg);
  line-height:1.45;
  border-top:1px solid var(--t23-border);
}

/* Mobile */
@media (max-width:640px){
  .t23-sim-min .t23-faq summary{ padding:10px 12px; }
  .t23-sim-min .t23-faq .t23-faq-a{ padding:10px 12px 12px 30px; }
}

/* Compartilhar (Etapa 8B) */
.t23-sim-min .t23-share{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--t23-border);
  border-radius:10px;
  background: var(--t23-soft);
}
.t23-sim-min .t23-share h3{
  margin:0 0 8px 0;
  font-size:1.05rem;
  color: var(--t23-muted);
  font-weight:600;
}
.t23-sim-min .t23-share-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
.t23-sim-min .t23-share-row .js-share-url{
  flex:1;
  min-width: 180px;
  border:1px solid var(--t23-border);
  border-radius:8px;
  padding:10px 12px;
  font-size:.95rem;
  background:#fff;
}
.t23-sim-min .t23-share-row .js-copy-link{
  border:1px solid var(--t23-accent);
  background:var(--t23-accent);
  color:var(--t23-accent-contrast);
  border-radius:8px;
  padding:10px 14px;
  font-size:.95rem;
  cursor:pointer;
}
.t23-sim-min .t23-share-row .js-copy-link:hover{
  filter:brightness(0.96);
}
.t23-sim-min .t23-share-qr{
  width:180px;
  height:180px;
  border:1px dashed var(--t23-border);
  border-radius:10px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.t23-sim-min .t23-share-qr img{
  max-width:100%;
  height:auto;
  display:block;
}
@media (max-width:640px){
  .t23-sim-min .t23-share-row{ flex-direction:column; align-items:stretch; }
}

/* Utilitário: esconder visualmente, mantendo para leitores de tela */
.t23-sr{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}