/* ============================================================
   AETHRA — Gaya khusus modul Lapor Kerusakan + Tracker
   Memakai variabel tema global (--accent, --good, --warn, dll).
   Muat SETELAH css/style.css di index.html.
   ============================================================ */

/* textarea menyesuaikan gaya .field input/select yang ada */
.field textarea {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--txt);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  resize: vertical;
  min-height: 64px;
}
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---- progres 3 langkah ---- */
.lap-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}
.lap-stepdot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: .35;
  filter: grayscale(1);
  transition: opacity .2s, filter .2s;
  flex: 0 0 auto;
  min-width: 56px;
}
.lap-stepdot.on {
  opacity: 1;
  filter: none;
}
.lap-stepdot span { font-size: 18px; line-height: 1; }
.lap-stepdot small {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}
.lap-stepdot.on small { color: var(--txt); }
.lap-stepbar {
  flex: 1 1 auto;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
}

/* ---- timeline ---- */
.lap-tl summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 13px;
  list-style: none;
}
.lap-tl summary::-webkit-details-marker { display: none; }
.lap-tl summary::before { content: "▸ "; }
.lap-tl[open] summary::before { content: "▾ "; }

.lap-timeline {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  border-left: 2px solid var(--line);
}
.lap-timeline li {
  position: relative;
  padding: 6px 0 6px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.lap-timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.lap-time {
  color: var(--muted);
  font-size: 11px;
  margin-left: auto;
}

.lap-item h4 { font-size: 15px; }