/* ===== Shared detail page styles (detail.css) ===== */

/* Theme tokens */
:root{
  --bg:#0b1324;
  --text:#1f2937;
  --muted:#6b7280;
  --card:#ffffff;
  --ring:rgba(2,132,199,.15);
  --shadow:0 6px 20px rgba(2,6,23,.08);

  --chip-blue:#e0f2fe;   --chip-blue-text:#075985;   --dot-blue:#0ea5e9;
  --chip-teal:#d1fae5;   --chip-teal-text:#065f46;   --dot-teal:#10b981;
  --chip-purple:#ede9fe; --chip-purple-text:#5b21b6; --dot-purple:#8b5cf6;
  --chip-amber:#fef3c7;  --chip-amber-text:#92400e;  --dot-amber:#f59e0b;
  --chip-green:#dcfce7;  --chip-green-text:#166534;  --dot-green:#22c55e;
  --chip-red:#fee2e2;    --chip-red-text:#991b1b;    --dot-red:#ef4444;
  --chip-gray:#e5e7eb;   --chip-gray-text:#374151;
}

/* Container + typography */
.detail-page{
  max-width: 980px;
  margin: 20px auto;
  background: var(--card);
  color: var(--text);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px;
  border: 1px solid #1ce71c;
}

/* Bigger, clearer headings */
.detail-page h2{
  color: var(--bg);
  margin: 0 0 .35rem 0;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.25;
}

/* Lead paragraph just under the title */
.detail-page .lead{
  color: var(--muted);
  margin:.4rem 0 1.1rem 0;
  font-size: clamp(1.1rem, 2.2vw, 1.25rem);
  line-height: 1.6;
}

/* Paragraph blocks (alternating backgrounds) */
.detail-page p{
  background: #f1f5f9;          /* soft neutral background */
  border-left: 4px solid #05bc82;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: clamp(1rem, 2.3vw, 1.15rem);
  line-height: 1.65;
}
.detail-page p:nth-of-type(odd){
  background: #fefce8;          /* warm highlight for alternating blocks */
  border-left-color: #f59e0b;
}
.detail-page p:nth-of-type(even){
  background: #e0f2fe;          /* cool highlight for alternating blocks */
  border-left-color: #0ea5e9;
}

/* Cards/sections */
.detail-page .card{
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 16px 12px 16px;
  margin: 12px 0;
  border: 1px solid #4586d4;
}
.detail-page .card-title{ margin-bottom:.6rem; }

/* Chips (colored section labels) */
.chip{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.95rem; }
.chip-blue{   background:var(--chip-blue);   color:var(--chip-blue-text); }
.chip-teal{   background:var(--chip-teal);   color:var(--chip-teal-text); }
.chip-purple{ background:var(--chip-purple); color:var(--chip-purple-text); }
.chip-amber{  background:var(--chip-amber);  color:var(--chip-amber-text); }
.chip-green{  background:var(--chip-green);  color:var(--chip-green-text); }
.chip-red{    background:var(--chip-red);    color:var(--chip-red-text); }
.chip-gray{   background:var(--chip-gray);   color:var(--chip-gray-text); }

/* Lists with colored dots */
.feature-list{ list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.feature-list li{
  display:flex; align-items:flex-start; gap:.6rem; line-height:1.6;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
}
.dot{ width:10px; height:10px; border-radius:50%; margin-top:.4rem; flex:0 0 10px; box-shadow:0 0 0 3px var(--ring); }
.dot-blue{   background:var(--dot-blue); }
.dot-teal{   background:var(--dot-teal); }
.dot-purple{ background:var(--dot-purple); }
.dot-amber{  background:var(--dot-amber); }
.dot-green{  background:var(--dot-green); }
.dot-red{    background:var(--dot-red); }

/* Numbered workflow steps */
.workflow{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.workflow li{
  display:flex; align-items:center; gap:.7rem; background:#5da4eb;
  border:1px solid #eef2f7; border-radius:12px; padding:10px 12px;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  line-height: 1.55;
}
.workflow li span{
  width:30px; height:30px; border-radius:50%;
  background:#0ea5e9; color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem; flex:0 0 30px;
}

/* Notes and links */
.detail-page .note{
  margin:.9rem 0; color:var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  background:#fff7ed; border:1px solid #ffedd5; border-radius:10px; padding:12px 14px;
}
.detail-page .back-link{ display:inline-block; margin-top:.25rem; text-decoration:none; color:#0ea5e9; font-weight:600; font-size:1rem; }
.detail-page .back-link:hover{ text-decoration:underline; }

/* Also style any generic paragraph class you use */
.detail-page .para{
  background: #f1f5f9;
  border-left: 4px solid #0ea5e9;
  padding: 12px 14px;
  border-radius: 8px;
  margin: .7rem 0 1.2rem;
  font-size: clamp(1rem, 2.3vw, 1.15rem);
  line-height: 1.65;
}

/* Mobile */
@media (max-width: 640px){
  .detail-page{ padding:16px }
  .feature-list{ gap:.55rem }
  .workflow li{ padding:9px 11px }
}