/* =========================================================
   EITCA — DORA course — shared AIF-style scoped visual system
   ========================================================= */

.eitca-topic.eitca-aif{
  --aif-text:#0f172a;
  --aif-muted:#475569;
  --aif-muted2:#64748b;
  --aif-border:#e2e8f0;
  --aif-border2:#cbd5e1;
  --aif-surface:#ffffff;
  --aif-soft:#f8fafc;

  --aif-primary:#2563eb;
  --aif-primarySoft:#eff6ff;

  --aif-success:#059669;
  --aif-successSoft:#ecfdf5;

  --aif-warn:#f59e0b;
  --aif-warnSoft:#fffbeb;

  --aif-info:#38bdf8;

  --aif-shadow: 0 10px 28px rgba(15,23,42,.08);
  --aif-shadowSoft: 0 8px 20px rgba(15,23,42,.06);

  color:var(--aif-text);
}

.eitca-topic.eitca-aif,
.eitca-topic.eitca-aif *{ box-sizing:border-box; }

.eitca-topic.eitca-aif .aif-wrap{
  max-width:1120px;
  margin:0 auto;
  /*padding:clamp(14px, 2vw, 22px);*/
}

/* Typography */
.eitca-topic.eitca-aif :where(h1,h2,h3,h4){
  margin:0 0 10px;
  line-height:1.22;
  letter-spacing:-0.01em;
}
.eitca-topic.eitca-aif h1{ font-size: clamp(24px, 2.5vw, 34px); }
.eitca-topic.eitca-aif h2{ font-size: clamp(18px, 2.1vw, 24px); }
.eitca-topic.eitca-aif h3{ font-size: 18px; }
.eitca-topic.eitca-aif h4{ font-size: 16px; }

.eitca-topic.eitca-aif p{ margin:0 0 10px; color:var(--aif-muted); }
.eitca-topic.eitca-aif strong{ color:var(--aif-text); }

.eitca-topic.eitca-aif .aif-mini{
  font-size:13px;
  color:var(--aif-muted2);
  line-height:1.45;
}

.eitca-topic.eitca-aif .aif-lead{
  margin-top:6px;
  color:var(--aif-muted);
  font-size:14px;
}

/* HERO */
.eitca-topic.eitca-aif .aif-hero{
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 45%, #ffffff 100%);
  border:1px solid var(--aif-border);
  border-radius:24px;
  padding:18px 18px;
  box-shadow: var(--aif-shadowSoft);
}

.eitca-topic.eitca-aif .aif-kicker{
  margin:0 0 8px;
  font-size:13px;
  font-weight:800;
  color:var(--aif-muted2);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.eitca-topic.eitca-aif .aif-subtitle{
  margin:10px 0 0;
  color:var(--aif-muted);
  font-size:15px;
  max-width:72ch;
}

.eitca-topic.eitca-aif .aif-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.eitca-topic.eitca-aif .aif-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--aif-border);
  background:var(--aif-surface);
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  color:var(--aif-text);
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}

/* Layout helpers */
.eitca-topic.eitca-aif .aif-body{ margin-top:16px; }

.eitca-topic.eitca-aif .aif-grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 860px){
  .eitca-topic.eitca-aif .aif-grid2{ grid-template-columns: 1fr; }
}

.eitca-topic.eitca-aif .aif-two{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 860px){
  .eitca-topic.eitca-aif .aif-two{ grid-template-columns: 1fr; }
}

.eitca-topic.eitca-aif .aif-hr{
  border:0;
  height:1px;
  background:var(--aif-border);
  margin:22px 0;
}

/* Cards */
.eitca-topic.eitca-aif .aif-card{
  background:var(--aif-surface);
  border:1px solid var(--aif-border);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--aif-shadowSoft);
  color:var(--aif-text);
}

.eitca-topic.eitca-aif .aif-list{
  margin:10px 0 0 18px;
  padding:0;
  color:var(--aif-muted);
}
.eitca-topic.eitca-aif .aif-list li{ margin: 6px 0; }

/* Callouts */
.eitca-topic.eitca-aif .aif-callout{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--aif-border);
  background:var(--aif-soft);
  color:var(--aif-text);
}

.eitca-topic.eitca-aif .aif-callout.info{
  background: var(--aif-primarySoft);
  border-color: #bfdbfe;
}
.eitca-topic.eitca-aif .aif-callout.warn{
  background: var(--aif-warnSoft);
  border-color: #fcd34d;
}
.eitca-topic.eitca-aif .aif-callout.ok{
  background: var(--aif-successSoft);
  border-color: #86efac;
}

.eitca-topic.eitca-aif .aif-ico{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(15,23,42,.06);
}
.eitca-topic.eitca-aif .aif-callout p{ color: var(--aif-muted); }

/* Details */
.eitca-topic.eitca-aif .aif-details{
  border:1px solid var(--aif-border);
  background:var(--aif-surface);
  border-radius:18px;
  box-shadow: var(--aif-shadowSoft);
  overflow:hidden;
}
.eitca-topic.eitca-aif .aif-details > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  font-weight:900;
  color:var(--aif-text);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom:1px solid var(--aif-border);
}
.eitca-topic.eitca-aif .aif-details > summary::-webkit-details-marker{ display:none; }

.eitca-topic.eitca-aif .aif-summaryNote{
  font-weight:800;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--aif-border);
  background:var(--aif-surface);
  color:var(--aif-muted2);
  white-space:nowrap;
}

.eitca-topic.eitca-aif .aif-detailsBody{
  padding:16px;
}

.eitca-topic.eitca-aif .aif-prose{
  color:var(--aif-text);
}
.eitca-topic.eitca-aif .aif-prose p{ color:var(--aif-muted); }
.eitca-topic.eitca-aif .aif-prose ul,
.eitca-topic.eitca-aif .aif-prose ol{
  margin:10px 0 0 20px;
  color:var(--aif-muted);
}

/* Figures / SVG */
.eitca-topic.eitca-aif .aif-figure{
  margin:16px 0;
  padding:14px;
  border:1px solid var(--aif-border);
  border-radius:18px;
  background:var(--aif-surface);
  box-shadow: var(--aif-shadowSoft);
}
.eitca-topic.eitca-aif .aif-figure figcaption{
  margin:0 0 10px;
  font-size:13px;
  font-weight:800;
  color:var(--aif-muted2);
}
.eitca-topic.eitca-aif .aif-svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}

/* Table */
.eitca-topic.eitca-aif .aif-tableWrap{
  overflow:auto;
  border:1px solid var(--aif-border);
  border-radius:16px;
  background:var(--aif-surface);
}
.eitca-topic.eitca-aif .aif-table{
  width:100%;
  min-width:860px;
  border-collapse:separate;
  border-spacing:0;
}
.eitca-topic.eitca-aif .aif-table th,
.eitca-topic.eitca-aif .aif-table td{
  padding:12px 12px;
  border-bottom:1px solid var(--aif-border);
  vertical-align:top;
}
.eitca-topic.eitca-aif .aif-table th{
  background:#f8fafc;
  color:var(--aif-text);
  font-size:13px;
  text-align:left;
}
.eitca-topic.eitca-aif .aif-table td{ color:var(--aif-muted); font-size:13px; }
.eitca-topic.eitca-aif .aif-table tr:last-child td{ border-bottom:0; }

/* Badges */
.eitca-topic.eitca-aif .aif-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--aif-border);
  background:#ffffff;
  color:var(--aif-text);
}
.eitca-topic.eitca-aif .aif-badge.blue{ background: #eff6ff; border-color:#bfdbfe; }
.eitca-topic.eitca-aif .aif-badge.green{ background: #ecfdf5; border-color:#a7f3d0; }
.eitca-topic.eitca-aif .aif-badge.amber{ background: #fffbeb; border-color:#fde68a; }

/* Keyboard hint pill */
.eitca-topic.eitca-aif .aif-kbd{
  display:inline-block;
  padding:2px 8px;
  border-radius:8px;
  border:1px solid var(--aif-border2);
  background:#ffffff;
  color:var(--aif-text);
  font-weight:800;
  font-size:12px;
}

/* Section */
.eitca-topic.eitca-aif .aif-section{
  margin:18px 0;
}

/* Map */
.eitca-topic.eitca-aif .aif-mapWrap{
  border:1px solid var(--aif-border);
  border-radius:18px;
  background:var(--aif-surface);
  box-shadow: var(--aif-shadowSoft);
  padding:14px;
}
.eitca-topic.eitca-aif .aif-mapHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.eitca-topic.eitca-aif .aif-mapHint{
  margin:0;
  font-size:13px;
  color:var(--aif-muted2);
}
.eitca-topic.eitca-aif .aif-mapGrid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-mapGrid{
    grid-template-columns: 1fr;
  }
}

.eitca-topic.eitca-aif .aif-mapPanel{
  border:1px solid var(--aif-border);
  border-radius:16px;
  background:var(--aif-soft);
  padding:14px;
}

.eitca-topic.eitca-aif .aif-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.eitca-topic.eitca-aif .aif-tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--aif-border);
  background:#ffffff;
  font-size:12px;
  font-weight:800;
  color:var(--aif-muted2);
}

.eitca-topic.eitca-aif .aif-mapNode{ cursor:pointer; }
.eitca-topic.eitca-aif .aif-mapNode:focus{ outline:none; }
.eitca-topic.eitca-aif .aif-mapNode:focus .aif-nodeStroke,
.eitca-topic.eitca-aif .aif-mapNode:hover .aif-nodeStroke{
  stroke: var(--aif-primary) !important;
  stroke-width: 3 !important;
}

/* Mini tool */
.eitca-topic.eitca-aif .aif-split{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-split{ grid-template-columns: 1fr; }
}

.eitca-topic.eitca-aif .aif-toolCard{
  border:1px solid var(--aif-border);
  border-radius:18px;
  background:var(--aif-soft);
  padding:16px;
  box-shadow: var(--aif-shadowSoft);
}

.eitca-topic.eitca-aif .aif-qBlock{ margin-bottom:14px; }
.eitca-topic.eitca-aif .aif-label{
  font-weight:900;
  color:var(--aif-text);
  margin-bottom:8px;
}
.eitca-topic.eitca-aif .aif-choiceGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.eitca-topic.eitca-aif .aif-choice{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border:1px solid var(--aif-border);
  border-radius:14px;
  background:#ffffff;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.eitca-topic.eitca-aif .aif-choice:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.eitca-topic.eitca-aif .aif-choice input[type="radio"]{
  margin-top:3px;
  width:18px;
  height:18px;
  flex:0 0 auto;
  accent-color: var(--aif-primary);
}
.eitca-topic.eitca-aif .aif-choice > span{
  display:flex;
  flex-direction:column;
  gap:3px;
  color:var(--aif-muted);
  line-height:1.25;
}
.eitca-topic.eitca-aif .aif-choice > span > strong{
  color:var(--aif-text);
}
.eitca-topic.eitca-aif .aif-choice > span > span{
  color:var(--aif-muted2);
  font-size:12px;
}

.eitca-topic.eitca-aif .aif-result{
  margin-top:10px;
  border:1px solid var(--aif-border);
  border-radius:14px;
  background:#ffffff;
  padding:12px;
}
.eitca-topic.eitca-aif .aif-resultTitle{
  margin:0 0 6px;
  font-weight:900;
  color:var(--aif-text);
}
.eitca-topic.eitca-aif .aif-resultBody{ margin:0 0 8px; color:var(--aif-muted); }
.eitca-topic.eitca-aif .aif-resultList{
  margin:0 0 0 18px;
  color:var(--aif-muted2);
  font-size:13px;
}

/* Buttons */
.eitca-topic.eitca-aif .aif-btnRow{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
}

.eitca-topic.eitca-aif .aif-btn{
  appearance:none;
  border:1px solid var(--aif-border2);
  background:#ffffff;
  color:var(--aif-text);
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.eitca-topic.eitca-aif .aif-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.eitca-topic.eitca-aif .aif-btn:active{ transform: translateY(0); box-shadow:none; }
.eitca-topic.eitca-aif .aif-btn:focus{ outline:none; }
.eitca-topic.eitca-aif .aif-btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.45);
}
.eitca-topic.eitca-aif .aif-btn.primary{
  background: var(--aif-primary);
  border-color: var(--aif-primary);
  color:#fff;
}
.eitca-topic.eitca-aif .aif-btn.ghost{
  background: transparent;
}

/* Inputs */
.eitca-topic.eitca-aif .aif-input{
  width:100%;
  border:1px solid var(--aif-border2);
  border-radius:14px;
  padding:10px 12px;
  background:#ffffff;
  color:var(--aif-text);
  font: inherit;
}
.eitca-topic.eitca-aif textarea.aif-input{
  min-height: 96px;
  resize: vertical;
}
.eitca-topic.eitca-aif .aif-help{
  margin:6px 0 0;
  font-size:13px;
  color:var(--aif-muted2);
}

/* Labs */
.eitca-topic.eitca-aif .aif-labGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:12px;
  align-items:stretch;
}
@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-labGrid{ grid-template-columns: 1fr; }
}

.eitca-topic.eitca-aif .aif-labCard{
  background:var(--aif-surface);
  border:1px solid var(--aif-border);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--aif-shadowSoft);
  width:100%;
  max-width:none;
}

.eitca-topic.eitca-aif .aif-meter{
  margin-top:12px;
  height:10px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.eitca-topic.eitca-aif .aif-meter > div{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #16a34a);
  transition: width .35s ease;
}

.eitca-topic.eitca-aif .aif-outputBox{
  margin-top:12px;
  border:1px solid var(--aif-border);
  border-radius:14px;
  padding:12px;
  background: var(--aif-soft);
}
.eitca-topic.eitca-aif .aif-outLine{
  font-weight:900;
  color:var(--aif-text);
  margin:0;
}
.eitca-topic.eitca-aif .aif-outSmall{
  margin-top:6px;
  font-size:13px;
  color:var(--aif-muted2);
}
.eitca-topic.eitca-aif .aif-outputPre{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--aif-border);
  background:#ffffff;
  white-space:pre-wrap;
  color:var(--aif-text);
  font-size:13px;
}

.eitca-topic.eitca-aif .aif-highlight{
  margin-top:10px;
  padding:10px 12px;
  border:1px dashed var(--aif-border2);
  border-radius:14px;
  background:#ffffff;
  min-height:44px;
}
.eitca-topic.eitca-aif .aif-chipRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.eitca-topic.eitca-aif .aif-chip{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--aif-border);
  background:var(--aif-soft);
}
.eitca-topic.eitca-aif .aif-chip.pos{ background:#ecfdf5; border-color:#a7f3d0; }
.eitca-topic.eitca-aif .aif-chip.neg{ background:#fef2f2; border-color:#fecaca; }

/* Activity 1 — Sort board */
.eitca-topic.eitca-aif .aif-sortBoard{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-sortBoard{ grid-template-columns: 1fr; }
}

.eitca-topic.eitca-aif .aif-deck{
  border:1px solid var(--aif-border);
  border-radius:16px;
  background:#ffffff;
  padding:12px;
}
.eitca-topic.eitca-aif .aif-deckTitle{
  margin:0 0 10px;
  font-weight:900;
  color:var(--aif-text);
}
.eitca-topic.eitca-aif .aif-cards{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:460px;
  overflow:auto;
  padding-right:6px;
}
.eitca-topic.eitca-aif .aif-cardItem{
  border:1px solid var(--aif-border2);
  border-radius:14px;
  background:var(--aif-soft);
  padding:10px 12px;
  font-weight:700;
  color:var(--aif-text);
  cursor:grab;
  user-select:none;
}
.eitca-topic.eitca-aif .aif-cardItem.is-dragging{ opacity:.65; cursor:grabbing; }
.eitca-topic.eitca-aif .aif-cardItem.is-selected{
  outline: 3px solid rgba(37,99,235,.22);
  background: var(--aif-primarySoft);
  border-color: rgba(37,99,235,.35);
}
.eitca-topic.eitca-aif .aif-cardItem.is-correct{
  border-color:#22c55e;
  background:#ecfdf5;
}
.eitca-topic.eitca-aif .aif-cardItem.is-wrong{
  border-color:#ef4444;
  background:#fef2f2;
}

.eitca-topic.eitca-aif .aif-buckets{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 640px){
  .eitca-topic.eitca-aif .aif-buckets{ grid-template-columns: 1fr; }
}
.eitca-topic.eitca-aif .aif-bucket{
  border:1px solid var(--aif-border);
  border-radius:16px;
  background:#ffffff;
  padding:12px;
  min-height:180px;
}
.eitca-topic.eitca-aif .aif-bucketHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:10px;
  gap:10px;
}
.eitca-topic.eitca-aif .aif-bucketHead span{
  font-weight:900;
  color:var(--aif-text);
}
.eitca-topic.eitca-aif .aif-bucketHead small{
  color:var(--aif-muted2);
  font-weight:800;
}

.eitca-topic.eitca-aif .aif-dropzone{
  border:2px dashed var(--aif-border2);
  border-radius:14px;
  min-height:120px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background: #fbfdff;
}
.eitca-topic.eitca-aif .aif-dropzone.is-over{
  border-color: rgba(37,99,235,.55);
  background: #eff6ff;
}

.eitca-topic.eitca-aif .aif-sortActions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.eitca-topic.eitca-aif .aif-sortResult{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--aif-border);
  background:var(--aif-soft);
  color:var(--aif-muted);
  min-height:44px;
}

/* Activity 2 — Flashcards */
.eitca-topic.eitca-aif .aif-fcTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.eitca-topic.eitca-aif .aif-fcProgress{
  font-weight:900;
  color:var(--aif-text);
}
.eitca-topic.eitca-aif .aif-fcControls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.eitca-topic.eitca-aif .aif-fcStage{
  margin-top:12px;
  display:flex;
  justify-content:center;
}

.eitca-topic.eitca-aif .aif-fcCard{
  width:min(760px, 100%);
  min-height:220px;
  border-radius:18px;
  border:1px solid var(--aif-border);
  background:#ffffff;
  box-shadow: var(--aif-shadowSoft);
  position:relative;
  transform-style:preserve-3d;
  transition: transform .55s ease;
  cursor:pointer;
  outline:none;
}
.eitca-topic.eitca-aif .aif-fcCard:focus-visible{
  box-shadow: 0 0 0 4px rgba(37,99,235,.18), var(--aif-shadowSoft);
  border-color: rgba(37,99,235,.45);
}
.eitca-topic.eitca-aif .aif-fcCard.is-flipped{
  transform: rotateY(180deg);
}

.eitca-topic.eitca-aif .aif-fcSide{
  position:absolute;
  inset:0;
  padding:18px;
  backface-visibility:hidden;  /* IMPORTANT: prevents mirrored overlap */
  -webkit-backface-visibility:hidden;
  border-radius:18px;
  overflow:auto;
}
.eitca-topic.eitca-aif .aif-fcFront{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.eitca-topic.eitca-aif .aif-fcBack{
  transform: rotateY(180deg);
  background:#ffffff;
  color:var(--aif-muted);
}

.eitca-topic.eitca-aif .aif-fcLabel{
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--aif-muted2);
}
.eitca-topic.eitca-aif .aif-fcMain{
  font-size:28px;
  font-weight:1000;
  color:var(--aif-text);
  letter-spacing:-0.02em;
}
.eitca-topic.eitca-aif .aif-fcHint{
  font-size:14px;
  font-weight:800;
  color:var(--aif-muted);
}

.eitca-topic.eitca-aif .aif-hidden{ display:none; }

/* Quiz */
.eitca-topic.eitca-aif .aif-quiz{
  border:1px solid var(--aif-border);
  background:var(--aif-surface);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--aif-shadowSoft);
}

.eitca-topic.eitca-aif .aif-quizHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.eitca-topic.eitca-aif .aif-quizTip{
  margin:0;
  color:var(--aif-muted2);
  font-size:13px;
  font-weight:700;
}

.eitca-topic.eitca-aif .aif-q{
  margin-top:12px;
  padding:14px;
  border:1px solid var(--aif-border);
  border-radius:16px;
  background:var(--aif-soft);
}
.eitca-topic.eitca-aif .aif-qTitle{
  margin:0 0 10px;
  font-weight:900;
  color:var(--aif-text);
}

.eitca-topic.eitca-aif .aif-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.eitca-topic.eitca-aif .aif-option{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--aif-border);
  background:#ffffff;
  cursor:pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  position:relative;
}
.eitca-topic.eitca-aif .aif-option:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.eitca-topic.eitca-aif .aif-option:focus-within{
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.40);
}

.eitca-topic.eitca-aif .aif-option input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.eitca-topic.eitca-aif .aif-radio{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid var(--aif-border2);
  margin-top:2px;
  flex:0 0 auto;
  position:relative;
}
.eitca-topic.eitca-aif .aif-option input[type="radio"]:checked + .aif-radio{
  border-color: var(--aif-primary);
}
.eitca-topic.eitca-aif .aif-option input[type="radio"]:checked + .aif-radio::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background: var(--aif-primary);
}

.eitca-topic.eitca-aif .aif-optionText{
  color:var(--aif-text);
  font-weight:400;
  line-height:1.35;
}

/* Selected state (set by JS for broad browser support) */
.eitca-topic.eitca-aif .aif-option.is-selected{
  background: var(--aif-primarySoft);
  border-color: rgba(37,99,235,.35);
}

.eitca-topic.eitca-aif .aif-feedback{
  margin-top:10px;
  font-size:13px;
  color:var(--aif-muted);
}
.eitca-topic.eitca-aif .aif-q.is-correct{
  border-color:#86efac;
  background:#ecfdf5;
}
.eitca-topic.eitca-aif .aif-q.is-wrong{
  border-color:#fecaca;
  background:#fef2f2;
}
.eitca-topic.eitca-aif .aif-q.is-unanswered{
  border-color:#fde68a;
  background:#fffbeb;
}

.eitca-topic.eitca-aif .aif-score{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--aif-border);
  border-radius:14px;
  background:var(--aif-soft);
  font-weight:900;
  color:var(--aif-text);
}


/* =========================================================
   Shared visual additions (lifecycle explorer, scenario and worksheet patterns)
   ========================================================= */

/* Lifecycle explorer */
.eitca-topic.eitca-aif .aif-lcWrap{
  border:1px solid var(--aif-border);
  border-radius:18px;
  background:var(--aif-surface);
  box-shadow: var(--aif-shadowSoft);
  padding:14px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-lcWrap{ grid-template-columns: 1fr; }
}

.eitca-topic.eitca-aif .aif-lcSteps{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.eitca-topic.eitca-aif .aif-lcBtn{
  appearance:none;
  border:1px solid var(--aif-border);
  background: #ffffff;
  border-radius:16px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.eitca-topic.eitca-aif .aif-lcBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.eitca-topic.eitca-aif .aif-lcBtn:focus{ outline:none; }
.eitca-topic.eitca-aif .aif-lcBtn:focus-visible{
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.45);
}
.eitca-topic.eitca-aif .aif-lcBtn.is-active{
  background: var(--aif-primarySoft);
  border-color: rgba(37,99,235,.35);
}
.eitca-topic.eitca-aif .aif-lcNum{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  border:1px solid var(--aif-border2);
  background:#ffffff;
  color:var(--aif-text);
  flex:0 0 auto;
}
.eitca-topic.eitca-aif .aif-lcBtn.is-active .aif-lcNum{
  border-color: rgba(37,99,235,.45);
}
.eitca-topic.eitca-aif .aif-lcTxt strong{
  display:block;
  color:var(--aif-text);
  font-weight:1000;
}
.eitca-topic.eitca-aif .aif-lcTxt small{
  display:block;
  margin-top:2px;
  color:var(--aif-muted2);
  font-weight:800;
}

.eitca-topic.eitca-aif .aif-lcPanel{
  border:1px solid var(--aif-border);
  border-radius:16px;
  background: var(--aif-soft);
  padding:14px;
}
.eitca-topic.eitca-aif .aif-lcTitle{ margin:0 0 8px; }

/* Metric scenario */
.eitca-topic.eitca-aif .aif-scnWrap{
  border:1px solid var(--aif-border);
  border-radius:18px;
  background:var(--aif-surface);
  box-shadow: var(--aif-shadowSoft);
  padding:14px;
}
.eitca-topic.eitca-aif .aif-scnTop{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.eitca-topic.eitca-aif .aif-scnProg{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:240px;
}
.eitca-topic.eitca-aif .aif-scnProgText{
  font-weight:900;
  color:var(--aif-text);
  text-align:right;
}
.eitca-topic.eitca-aif .aif-scnBar{
  height:10px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.eitca-topic.eitca-aif .aif-scnBar > div{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, #2563eb, #059669);
  transition: width .35s ease;
}

.eitca-topic.eitca-aif .aif-scnCard{
  margin-top:12px;
  border:1px solid var(--aif-border);
  border-radius:16px;
  background:var(--aif-soft);
  padding:14px;
}
.eitca-topic.eitca-aif .aif-scnContext{
  border:1px solid var(--aif-border);
  border-radius:14px;
  background:#ffffff;
  padding:12px;
  color:var(--aif-muted);
}
.eitca-topic.eitca-aif .aif-scnQuestion{
  margin-top:12px;
  font-weight:1000;
  color:var(--aif-text);
}
.eitca-topic.eitca-aif .aif-scnOptions{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

.eitca-topic.eitca-aif .aif-scnPick{
  appearance:none;
  border:1px solid var(--aif-border);
  background:#ffffff;
  border-radius:14px;
  padding:12px;
  text-align:left;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.eitca-topic.eitca-aif .aif-scnPick:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.eitca-topic.eitca-aif .aif-scnPick:focus{ outline:none; }
.eitca-topic.eitca-aif .aif-scnPick:focus-visible{
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.45);
}
.eitca-topic.eitca-aif .aif-scnPick strong{
  display:block;
  font-weight:1000;
  color:var(--aif-text);
}
.eitca-topic.eitca-aif .aif-scnPick span{
  display:block;
  margin-top:4px;
  color:var(--aif-muted2);
  font-size:12px;
  font-weight:800;
}
.eitca-topic.eitca-aif .aif-scnPick.is-selected{
  background: var(--aif-primarySoft);
  border-color: rgba(37,99,235,.35);
}
.eitca-topic.eitca-aif .aif-scnPick.is-correct{
  background:#ecfdf5;
  border-color:#86efac;
}
.eitca-topic.eitca-aif .aif-scnPick.is-wrong{
  background:#fef2f2;
  border-color:#fecaca;
}

.eitca-topic.eitca-aif .aif-scnFeedback{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--aif-border);
  background:#ffffff;
  color:var(--aif-muted);
  min-height:44px;
}
.eitca-topic.eitca-aif .aif-scnScore{
  margin-top:10px;
  color:var(--aif-text);
  font-weight:900;
}

/* Worksheet */
.eitca-topic.eitca-aif .aif-wsWrap{
  border:1px solid var(--aif-border);
  border-radius:18px;
  background:var(--aif-surface);
  box-shadow: var(--aif-shadowSoft);
  padding:14px;
  margin-top:12px;
}
.eitca-topic.eitca-aif .aif-wsTop{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.eitca-topic.eitca-aif .aif-wsProg{
  min-width:260px;
}
.eitca-topic.eitca-aif .aif-wsGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-wsGrid{ grid-template-columns: 1fr; }
}
.eitca-topic.eitca-aif .aif-wsPreview{
  border:1px solid var(--aif-border);
  border-radius:16px;
  background:var(--aif-soft);
  padding:14px;
}

.eitca-topic.eitca-aif .aif-riskGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.eitca-topic.eitca-aif .aif-chipBtn{
  appearance:none;
  border:1px solid var(--aif-border);
  background:#ffffff;
  color:var(--aif-text);
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.eitca-topic.eitca-aif .aif-chipBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.eitca-topic.eitca-aif .aif-chipBtn:focus{ outline:none; }
.eitca-topic.eitca-aif .aif-chipBtn:focus-visible{
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.45);
}

/* Worksheet split strategy selector (Topic 1.2) */
.eitca-topic.eitca-aif .aif-choiceGrid--3{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

.eitca-topic.eitca-aif .aif-wsSplitCallout{
  border-color: rgba(37,99,235,.20);
}

/* =========================================================
   Topic 1.3 — NEW UI elements
   NEW #1: Leakage Detective
   NEW #2: Imbalance Simulator (confusion matrix + metrics)
   ========================================================= */

.eitca-topic.eitca-aif .aif-leakWrap{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(248,250,252,.65);
}

.eitca-topic.eitca-aif .aif-leakTop{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.eitca-topic.eitca-aif .aif-leakTabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.eitca-topic.eitca-aif .aif-leakTab{
  appearance:none;
  border: 1px solid rgba(15,23,42,.14);
  background:#fff;
  padding:8px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor:pointer;
}

.eitca-topic.eitca-aif .aif-leakTab.is-active{
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

.eitca-topic.eitca-aif .aif-leakPanel{
  margin-top:12px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 12px;
}

.eitca-topic.eitca-aif .aif-leakScenarioTitle{
  font-size: 16px;
  font-weight: 950;
  margin:0 0 6px;
}

.eitca-topic.eitca-aif .aif-leakScenarioDesc{
  margin:0 0 10px;
  color: var(--aif-muted, #475569);
}

.eitca-topic.eitca-aif .aif-leakList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.eitca-topic.eitca-aif .aif-leakItem{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(248,250,252,.55);
}

.eitca-topic.eitca-aif .aif-leakItem.is-correct{
  border-color: rgba(5,150,105,.35);
  background: rgba(236,253,245,.75);
}

.eitca-topic.eitca-aif .aif-leakItem.is-wrong{
  border-color: rgba(239,68,68,.35);
  background: rgba(254,242,242,.75);
}

.eitca-topic.eitca-aif .aif-leakLbl{
  display:flex;
  gap:10px;
  align-items:flex-start;
  cursor:pointer;
}

.eitca-topic.eitca-aif .aif-leakLbl input{
  margin-top:3px;
}

.eitca-topic.eitca-aif .aif-leakFeat{
  font-weight: 900;
}

.eitca-topic.eitca-aif .aif-leakMeta{
  color: var(--aif-muted, #475569);
  font-weight: 600;
  margin-left:6px;
}

.eitca-topic.eitca-aif .aif-leakWhy{
  margin-top:8px;
  color: var(--aif-muted, #475569);
  font-size: 13px;
  line-height: 1.4;
  display:none;
}

.eitca-topic.eitca-aif .aif-leakItem.show-why .aif-leakWhy{
  display:block;
}

/* Imbalance simulator */
.eitca-topic.eitca-aif .aif-imbWrap{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(248,250,252,.65);
}

.eitca-topic.eitca-aif .aif-imbControls{
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 12px;
}

.eitca-topic.eitca-aif .aif-imbGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}

@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-imbGrid{ grid-template-columns: 1fr; }
}

.eitca-topic.eitca-aif .aif-matrix{
  display:grid;
  grid-template-columns: 110px 1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.eitca-topic.eitca-aif .aif-matrixHead{
  font-size: 12px;
  font-weight: 900;
  color: var(--aif-muted, #475569);
  display:flex;
  align-items:center;
  justify-content:center;
}

.eitca-topic.eitca-aif .aif-matrixCell{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(248,250,252,.55);
  text-align:center;
}

.eitca-topic.eitca-aif .aif-matrixCell.tp{ background: rgba(236,253,245,.75); }
.eitca-topic.eitca-aif .aif-matrixCell.fp{ background: rgba(255,251,235,.85); }
.eitca-topic.eitca-aif .aif-matrixCell.fn{ background: rgba(254,242,242,.75); }
.eitca-topic.eitca-aif .aif-matrixCell.tn{ background: rgba(239,246,255,.75); }

.eitca-topic.eitca-aif .aif-matrixNum{
  font-size: 20px;
  font-weight: 1000;
  color:#0f172a;
}

.eitca-topic.eitca-aif .aif-matrixLbl{
  font-size: 12px;
  color: var(--aif-muted, #475569);
  font-weight: 800;
}

.eitca-topic.eitca-aif .aif-imbMetrics{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}

.eitca-topic.eitca-aif .aif-metricTile{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background:#fff;
}

.eitca-topic.eitca-aif .aif-metricVal{
  font-weight: 1000;
  font-size: 18px;
  color:#0f172a;
}

.eitca-topic.eitca-aif .aif-metricLbl{
  font-size: 12px;
  color: var(--aif-muted, #475569);
  font-weight: 800;
  margin-top:2px;
}

/* Data card worksheet check grid */
.eitca-topic.eitca-aif .aif-checkGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:8px;
}

.eitca-topic.eitca-aif .aif-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.55);
  padding: 10px 10px;
  border-radius: 14px;
  cursor:pointer;
}

.eitca-topic.eitca-aif .aif-check input{ margin-top:3px; }
.eitca-topic.eitca-aif .aif-check span{ font-weight: 700; color:#0f172a; }


/* =========================================================
   Topic 1.4 — NEW UI elements
   NEW #1: Toy Vision Classifier
   NEW #2: Teachable Machine Lab Log helper styles
   ========================================================= */

.eitca-topic.eitca-aif .aif-toyWrap{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(248,250,252,.65);
}

.eitca-topic.eitca-aif .aif-toyGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-toyGrid{ grid-template-columns: 1fr; }
}

.eitca-topic.eitca-aif .aif-toyLine{
  margin: 8px 0;
  color:#0f172a;
  font-weight: 700;
}

.eitca-topic.eitca-aif .aif-toyKpiGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.eitca-topic.eitca-aif .aif-toyKpi{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background:#fff;
}

.eitca-topic.eitca-aif .aif-toyKpiVal{
  font-weight: 1000;
  font-size: 18px;
  color:#0f172a;
}

.eitca-topic.eitca-aif .aif-toyKpiLbl{
  font-size: 12px;
  font-weight: 800;
  color: var(--aif-muted, #475569);
  margin-top:2px;
}

.eitca-topic.eitca-aif .aif-toyGallery{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}

@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-toyGallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.eitca-topic.eitca-aif .aif-toyTile{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background:#fff;
  overflow:hidden;
}

.eitca-topic.eitca-aif .aif-toyThumb{
  height: 74px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom: 1px solid rgba(15,23,42,.08);
  position:relative;
}

.eitca-topic.eitca-aif .aif-toyThumb.bg-blue{ background: rgba(37,99,235,.10); }
.eitca-topic.eitca-aif .aif-toyThumb.bg-green{ background: rgba(5,150,105,.10); }

.eitca-topic.eitca-aif .aif-toyShape{
  width: 28px;
  height: 28px;
  display:block;
  background: rgba(15,23,42,.85);
}

.eitca-topic.eitca-aif .aif-toyShape.circle{ border-radius: 999px; }
.eitca-topic.eitca-aif .aif-toyShape.triangle{
  width: 0;
  height: 0;
  background: transparent;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 28px solid rgba(15,23,42,.85);
}

.eitca-topic.eitca-aif .aif-toyBody{
  padding: 10px 10px 12px;
}

.eitca-topic.eitca-aif .aif-toyMeta{
  font-size: 12px;
  color: var(--aif-muted, #475569);
  font-weight: 800;
}

.eitca-topic.eitca-aif .aif-toyPred{
  margin-top:6px;
  font-weight: 900;
  color:#0f172a;
  font-size: 13px;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}

.eitca-topic.eitca-aif .aif-toyTag{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  color: var(--aif-muted, #475569);
  background: rgba(248,250,252,.75);
}

.eitca-topic.eitca-aif .aif-toyTag.bad{
  border-color: rgba(239,68,68,.28);
  background: rgba(254,242,242,.85);
  color: rgba(185,28,28,.95);
}

.eitca-topic.eitca-aif .aif-toyBar{
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  overflow:hidden;
  margin-top:8px;
}

.eitca-topic.eitca-aif .aif-toyBar > div{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: rgba(37,99,235,.85);
}

.eitca-topic.eitca-aif .aif-toyStats{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(248,250,252,.55);
}

.eitca-topic.eitca-aif .aif-toyCM{
  display:grid;
  grid-template-columns: 110px 1fr 1fr;
  gap:8px;
  margin-top:10px;
}

.eitca-topic.eitca-aif .aif-toyCMHead{
  font-size: 12px;
  font-weight: 900;
  color: var(--aif-muted, #475569);
  display:flex;
  align-items:center;
  justify-content:center;
}

.eitca-topic.eitca-aif .aif-toyCMCell{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px 10px;
  background:#fff;
  text-align:center;
}

.eitca-topic.eitca-aif .aif-toyCMNum{
  font-weight: 1000;
  font-size: 18px;
  color:#0f172a;
}

.eitca-topic.eitca-aif .aif-toyCMLbl{
  font-size: 11px;
  font-weight: 900;
  color: var(--aif-muted, #475569);
  margin-top:2px;
}


/* =========================================================
   Topic 1.5 — NEW UI elements
   NEW #1: Metrics Explorer (matrix focus/dim)
   NEW #2: Threshold Tuner + histogram legend + metric grid 3-col
   ========================================================= */

/* NEW #1: matrix highlight helpers */
.eitca-topic.eitca-aif .aif-matrixCell.is-dim{
  opacity: .35;
  filter: grayscale(.20);
}
.eitca-topic.eitca-aif .aif-matrixCell.is-focus{
  outline: 3px solid rgba(37,99,235,.18);
  box-shadow: 0 0 0 4px rgba(37,99,235,.08) inset;
}

/* NEW #2: threshold tuner wrap */
.eitca-topic.eitca-aif .aif-thWrap{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(248,250,252,.65);
}

.eitca-topic.eitca-aif .aif-thTop{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* two-column area inside threshold tuner */
.eitca-topic.eitca-aif .aif-thGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
  align-items:start;
}
@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-thGrid{ grid-template-columns: 1fr; }
}

/* 3-column metric tiles (falls back to 2/1 on smaller screens) */
.eitca-topic.eitca-aif .aif-metricGrid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 980px){
  .eitca-topic.eitca-aif .aif-metricGrid3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .eitca-topic.eitca-aif .aif-metricGrid3{ grid-template-columns: 1fr; }
}

/* histogram + legend */
.eitca-topic.eitca-aif .aif-thVizHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.eitca-topic.eitca-aif .aif-thSvg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}

.eitca-topic.eitca-aif .aif-thLegend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.eitca-topic.eitca-aif .aif-thKey{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--aif-border);
  background:#fff;
  font-size:12px;
  font-weight:900;
  color: var(--aif-muted2);
}

.eitca-topic.eitca-aif .aif-thSwatch{
  width:14px;
  height:10px;
  border-radius:4px;
  display:inline-block;
  border:1px solid rgba(15,23,42,.10);
}
.eitca-topic.eitca-aif .aif-thSwatch.neg{ background: rgba(37,99,235,.22); border-color: rgba(37,99,235,.25); }
.eitca-topic.eitca-aif .aif-thSwatch.pos{ background: rgba(5,150,105,.22); border-color: rgba(5,150,105,.25); }
.eitca-topic.eitca-aif .aif-thSwatch.line{ background: rgba(15,23,42,.80); border-color: rgba(15,23,42,.18); }


/* =========================================================
   Shared visual extensions and compatibility layer
   Append after the global scoped CSS
   ========================================================= */

.eitca-topic.eitca-aif{
  /* Extra tokens used by later topics */
  --aif-faint:#94a3b8;

  --aif-danger:#ef4444;
  --aif-dangerSoft:#fef2f2;
  --aif-dangerBorder:#fecaca;

  /* Optional: extra “soft surface” for multi-layer panels */
  --aif-soft2:#f1f5f9;

  /* Optional: a consistent “glass” look for LIGHT UI (not grey) */
  --aif-glass: rgba(255,255,255,.78);
  --aif-glassBorder: rgba(15,23,42,.10);
}

/* -----------------------------------------
   Small but important compatibility aliases
   ----------------------------------------- */

/* Some newer topics used .aif-icon; older base uses .aif-ico */
.eitca-topic.eitca-aif .aif-icon,
.eitca-topic.eitca-aif .aif-ico{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(15,23,42,.06);
}

/* Some newer topics used .aif-ul / .aif-ol instead of .aif-list */
.eitca-topic.eitca-aif .aif-ul,
.eitca-topic.eitca-aif .aif-ol{
  margin:10px 0 0 18px;
  color:var(--aif-muted);
}
.eitca-topic.eitca-aif .aif-ul li,
.eitca-topic.eitca-aif .aif-ol li{
  margin:6px 0;
}

/* Make sure form controls inherit typography (WP themes sometimes don’t) */
.eitca-topic.eitca-aif :where(button,input,select,textarea){
  font: inherit;
}

/* -----------------------------------------
   Quiz option style used in some 6.x topics
   (.aif-opt labels with radios)
   ----------------------------------------- */
.eitca-topic.eitca-aif .aif-opt{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--aif-border);
  background:#ffffff;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.eitca-topic.eitca-aif .aif-opt:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,23,42,.06);
}
.eitca-topic.eitca-aif .aif-opt input[type="radio"]{
  margin-top:3px;
  width:18px;
  height:18px;
  flex:0 0 auto;
  accent-color: var(--aif-primary);
}
.eitca-topic.eitca-aif .aif-opt > span{
  color:var(--aif-text);
  font-weight:800;
  line-height:1.25;
}

/* Quiz actions row used by some newer quizzes */
.eitca-topic.eitca-aif .aif-quizActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Feedback badges used by some newer quiz engines */
.eitca-topic.eitca-aif .aif-feedback.ok{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #86efac;
  background: var(--aif-successSoft);
  color: var(--aif-text);
}
.eitca-topic.eitca-aif .aif-feedback.bad{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--aif-dangerBorder);
  background: var(--aif-dangerSoft);
  color: var(--aif-text);
}

/*css fixes*/
.eitca-topic.eitca-aif.eitca-dora .dora-ownerTable {
	min-width: 700px!important;
}

.eitca-topic.eitca-aif.eitca-dora .dora-ownerTable th {
	white-space: normal!important;
}

.eitca-topic.eitca-aif.eitca-dora .dora-sequence {
	grid-template-columns:auto!important;
}

.eitca-topic.eitca-aif .aif-fcFace.aif-fcFront {
	text-align: center!important;
	font-size: 20px!important;
}

.eitca-topic.eitca-aif.eitca-dora .dora-calendarOutput {
	grid-template-columns: auto!important;
}