/* =========================================================
   Roiatek AI · automation.css
   "AI automation and workflows" section: text + animated
   workflow board (js/automation.js). Dark and light themes.
   ========================================================= */

.auto-section { overflow-x: clip; }
.auto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: 1120px;
}
.auto-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
}
.auto-kicker .ico { width: 18px; height: 18px; }
.auto-copy h2 { margin-top: 18px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); max-width: 14ch; }
.auto-copy .lede { margin-top: 18px; max-width: 48ch; }
.auto-points { display: grid; gap: 14px; margin-top: 28px; }
.auto-points li { display: flex; align-items: center; gap: 14px; font-size: 1.0313rem; font-weight: 500; }
.auto-dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
}
.auto-dot .ico { width: 19px; height: 19px; }
.auto-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.auto-note { margin-top: 16px; font-size: 0.8125rem; color: var(--text-3); }

/* ---------- Workflow board ---------- */
.auto-board-wrap { position: relative; }
.auto-board-wrap::before {
  content: "";
  position: absolute;
  inset: 8% -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34, 228, 245, 0.14), rgba(140, 92, 255, 0.08) 60%, transparent);
  pointer-events: none;
}
.auto-board {
  position: relative;
  padding: 16px 18px 18px;
  border-radius: 24px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(20, 42, 98, 0.85), rgba(8, 19, 50, 0.92));
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.auto-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.auto-win { display: inline-flex; gap: 6px; }
.auto-win i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.auto-win i:nth-child(1) { background: #ff5f57; }
.auto-win i:nth-child(2) { background: #febc2e; }
.auto-win i:nth-child(3) { background: #28c840; }
.auto-top strong { font-family: var(--font-display); font-stretch: 106%; font-size: 0.9375rem; font-weight: 650; }
.auto-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
}
.auto-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: auto-blink 1.2s ease-in-out infinite; }
.auto-board.is-done .auto-live { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.auto-board.is-done .auto-live i { animation: none; }

.auto-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.auto-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--line);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.auto-tabs button .ico { width: 15px; height: 15px; }
.auto-tabs button:hover { color: var(--text); border-color: var(--line-strong); }
.auto-tabs button.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}

.auto-request {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(5, 12, 34, 0.55);
  border: 1px solid var(--line);
}
.auto-req-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.auto-req-ico .ico { width: 19px; height: 19px; }
.auto-req-txt { display: grid; min-width: 0; line-height: 1.35; }
.auto-req-txt strong { font-size: 0.9063rem; }
.auto-req-txt small { font-size: 0.78rem; color: var(--text-3); }

/* Steps: a vertical timeline */
.auto-steps { position: relative; display: grid; }
.auto-steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: var(--line-strong);
}
.auto-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  opacity: 0.45;
  transition: opacity 0.35s var(--ease);
}
.auto-step.is-active,
.auto-step.is-complete { opacity: 1; }
.auto-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-3);
  background: #0b1a44;
  border: 1.5px solid var(--line-strong);
  transition: all 0.35s var(--ease);
}
.auto-node > .ico { width: 18px; height: 18px; }
.auto-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #03201a;
  background: var(--green);
  border: 2px solid #0b1a44;
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}
.auto-check .ico { width: 10px; height: 10px; stroke-width: 3; }

/* Active step */
.auto-step.is-active .auto-node {
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 15%, transparent), 0 0 18px color-mix(in srgb, var(--cyan) 45%, transparent);
}
.auto-step.is-person.is-active .auto-node {
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 15%, transparent), 0 0 18px color-mix(in srgb, var(--amber) 45%, transparent);
  animation: auto-pulse 1.2s ease-in-out infinite;
}
/* Completed step */
.auto-step.is-complete .auto-node { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.auto-step.is-person.is-complete .auto-node { background: linear-gradient(135deg, var(--amber), #e2734a); }
.auto-step.is-skip.is-complete .auto-node { color: var(--text-3); background: transparent; border: 1.5px dashed var(--line-strong); }
.auto-step.is-complete:not(.is-skip) .auto-check { transform: scale(1); }

.auto-step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-step-head strong { font-size: 0.9063rem; }
.auto-step-body p { margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--text-2); }
.auto-step.is-skip.is-complete .auto-step-head strong { color: var(--text-3); text-decoration: line-through; }
.auto-tag {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.auto-tag--ai { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); }
.auto-tag--person { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.auto-tag--skip { color: var(--text-3); background: color-mix(in srgb, var(--text-3) 14%, transparent); }
.auto-state { font-size: 0.75rem; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.auto-step.is-active .auto-state { color: var(--cyan); }
.auto-step.is-person.is-active .auto-state { color: var(--amber); }
.auto-step.is-complete .auto-state { color: var(--green); }
.auto-step.is-skip.is-complete .auto-state { color: var(--text-3); }

.auto-result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  animation: auto-in 0.4s var(--ease) both;
}
.auto-result[hidden] { display: none; }
.auto-result .ico { width: 18px; height: 18px; flex: none; stroke-width: 2.4; }

@keyframes auto-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes auto-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--amber) 8%, transparent), 0 0 24px color-mix(in srgb, var(--amber) 55%, transparent); } }
@keyframes auto-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Light theme ---------- */
html[data-theme="light"] .auto-board {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 30px 60px -36px rgba(11, 26, 63, 0.35);
}
html[data-theme="light"] .auto-request { background: #f4f7fd; }
html[data-theme="light"] .auto-node,
html[data-theme="light"] .auto-check { background-color: #fff; }
html[data-theme="light"] .auto-check { background: var(--green); border-color: #fff; color: #fff; }
html[data-theme="light"] .auto-step.is-complete .auto-node { background: linear-gradient(135deg, #06b6d4, #3359e0); }
html[data-theme="light"] .auto-step.is-person.is-complete .auto-node { background: linear-gradient(135deg, #f59e0b, #e2734a); }
html[data-theme="light"] .auto-step.is-skip.is-complete .auto-node { background: #fff; }
html[data-theme="light"] .auto-board-wrap::before { background: radial-gradient(closest-side, rgba(6, 182, 212, 0.1), rgba(113, 72, 232, 0.06) 60%, transparent); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .auto-grid { grid-template-columns: minmax(0, 1fr); }
  .auto-copy { max-width: 620px; }
  .auto-board-wrap { max-width: 520px; width: 100%; min-width: 0; margin: 0 auto; }
}
@media (max-width: 640px) {
  .auto-actions .btn { width: 100%; }
  .auto-board { padding: 14px; }
  .auto-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
  .auto-tabs::-webkit-scrollbar { display: none; }
  .auto-tabs button { flex: none; }
  .auto-step { grid-template-columns: 40px minmax(0, 1fr); }
  .auto-state { grid-column: 2; margin-top: -4px; }
}