/* Branding-aligned helpers for AI Readiness page.
   Uses Ocora color vars defined in ai-readiness.html head.
*/

.ar-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08); /* slate-900 @ low alpha */
  overflow: hidden;
}

.ar-bar{
  height: 100%;
  width: 0%;
  background: var(--ocora-blue);
  transition: width .25s ease;
}

.ar-pill{
  font-size: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.75);
}

/* Options generated by JS: .opt + .meta */
.opt{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 10px 30px -20px rgba(2, 8, 23, 0.25); /* soft */
  cursor: pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}

.opt:hover{
  border-color: color-mix(in oklab, var(--ocora-blue) 35%, white);
  background: rgba(0, 8, 255, 0.03);
  transform: translateY(-1px);
}

.opt input{
  margin-top: 3px;
}

.opt .meta{
  font-size: 13px;
  color: rgba(15, 23, 42, 0.65);
  margin-top: 2px;
}

/* Breakdown rows generated by JS: .row */
.row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
}